This component provides the
context for all the other ones. It also transpiles the user’s code!
It supports these props, while passing any others through to the
|code||The code that should be rendered, apart from the user’s edits|
|scope||Accepts custom globals that the |
|noInline||Doesn’t evaluate and mount the inline code (Default: |
|transformCode||Accepts and returns the code to be transpiled, affording an opportunity to first transform it|
|language||What language you're writing for correct syntax highlighting. (Default: |
|enableTypeScript||Enables TypeScript support in transpilation. (Default: |
|disabled||Disable editing on the |
All subsequent components must be rendered inside a provider, since they communicate using one.
noInline option kicks the Provider into a different mode, where you can write imperative-style
code and nothing gets evaluated and mounted automatically. Your example will need to call
with valid JSX elements.
|style||Allows overriding default styles on the |
|tabMode||Sets how you want the tab key to work. (Default: |
This component renders any error that occur while executing the code, or transpiling it.
It passes through any props to a
Note: Right now when the component unmounts, when there’s no error to be shown.
This component renders the actual component that the code generates inside an error boundary.
|Component||Element that wraps the generated code. (Default: |
withLive method creates a higher-order component, that injects the live-editing props provided
LiveProvider into a component.
Using this HOC allows you to add new components to react-live, or replace the default ones, with a new desired behavior.
The component wrapped with
withLive gets injected the following props:
|code||Reflects the code that is passed in as the |
|error||An error that the code has thrown when it was previewed|
|onError||A callback that, when called, changes the error to what's passed as the first argument|
|onChange||A callback that accepts new code and transpiles it|
|element||The result of the transpiled code that is previewed|
Note: The code prop doesn't reflect the up-to-date code, but the
codeprop, that is passed to the