You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Notice something inaccurate or confusing? Feel free to [open an issue](https://github.com/FormidableLabs/react-live/issues/new/choose) or [make a pull request](https://github.com/FormidableLabs/react-live/pulls) to help improve the documentation for everyone!
38
33
39
-
## Demo
34
+
The source for our docs site lives in this repo in the [`docs`](https://github.com/FormidableLabs/react-live/blob/main/docs) folder.
It takes your code and transpiles it with [Sucrase](https://github.com/alangpierce/sucrase), while the code is displayed using [`use-editable`](https://github.com/FormidableLabs/use-editable) and the code is highlighted using [`prism-react-renderer`](https://github.com/FormidableLabs/prism-react-renderer).
48
-
49
-
The transpiled code is then rendered in the preview component (`LivePreview`), which does a fake mount if the code
50
-
is a React component.
51
-
52
-
Prior to `v3.0.0`, earlier versions of the library used different internals. We recommend using the latest version you can.
53
-
54
-
| Version | Supported React version | Editor | Transpiler |
- React elements, e.g. `<strong>Hello World!</strong>`
69
-
- React pure functional components, e.g. `() => <strong>Hello World!</strong>`
70
-
- React functional components with Hooks
71
-
- React component classes
72
-
73
-
If you enable the `noInline` prop on your `LiveProvider`, you’ll be able to write imperative code,
74
-
and render one of the above things by calling `render`.
75
-
76
-
### How does the scope work?
77
-
78
-
The `scope` prop on the `LiveProvider` accepts additional globals. By default it injects `React` only, which
79
-
means that the user can use it in their code like this:
80
-
81
-
```js
82
-
// ↓↓↓↓↓
83
-
classExampleextendsReact.Component {
84
-
render() {
85
-
return<strong>Hello World!</strong>;
86
-
}
87
-
}
88
-
```
89
-
90
-
But you can of course pass more things to the scope. They will be available as variables in the code. Here's an example using [styled components](https://github.com/styled-components/styled-components):
Here's an example using a custom component `<MyButton />`. This component lives in a different directory. It gets passed into the scope wrapped in an Object. Note that since we are not using `render()` in the code snippet we let `noInline` stay equal to the default of `false`:
116
-
117
-
```js
118
-
119
-
import { MyButton } from'./components/MyButton';
120
-
121
-
constscope= { MyButton };
122
-
123
-
constcode=`
124
-
<MyButton />
125
-
`
126
-
127
-
<LiveProvider code={code} scope={scope}>
128
-
<LiveEditor />
129
-
<LiveError />
130
-
<LivePreview />
131
-
</LiveProvider>
132
-
```
133
-
134
-
### Using Hooks
135
-
136
-
React Live supports using Hooks, but you may need to be mindful of the scope. As mentioned above, only React is injected into scope by default.
137
-
138
-
This means that while you may be used to destructuring `useState` when importing React, to use hooks provided by React in React Live you will either need to stick to using `React.useState` or alternately you can set the scope up so that `useState` is provided separately.
| code | PropTypes.string | The code that should be rendered, apart from the user’s edits |
175
-
| scope | PropTypes.object | Accepts custom globals that the `code` can use |
176
-
| noInline | PropTypes.bool | Doesn’t evaluate and mount the inline code (Default: `false`). Note: when using `noInline` whatever code you write must be a single expression (function, class component or some `jsx`) that can be returned immediately. If you'd like to render multiple components, use `noInline={true}`|
177
-
| transformCode | PropTypes.func | Accepts and returns the code to be transpiled, affording an opportunity to first transform it |
178
-
| language | PropTypes.string | What language you're writing for correct syntax highlighting. (Default: `jsx`) |
179
-
| disabled | PropTypes.bool | Disable editing on the `<LiveEditor />` (Default: `false`) |
180
-
| theme | PropTypes.object | A `prism-react-renderer` theme object. See more [here](https://github.com/FormidableLabs/prism-react-renderer#theming)|
181
-
182
-
All subsequent components must be rendered inside a provider, since they communicate
183
-
using one.
184
-
185
-
The `noInline` option kicks the Provider into a different mode, where you can write imperative-style
186
-
code and nothing gets evaluated and mounted automatically. Your example will need to call `render`
187
-
with valid JSX elements.
188
-
189
-
### <LiveEditor />
190
-
191
-
This component renders the editor that displays the code. It is a wrapper around [`react-simple-code-editor`](https://github.com/satya164/react-simple-code-editor) and the code highlighted using [`prism-react-renderer`](https://github.com/FormidableLabs/prism-react-renderer).
| code | PropTypes.string | Reflects the code that is passed in as the `code` prop |
226
-
| error | PropTypes.string | An error that the code has thrown when it was previewed |
227
-
| onError | PropTypes.func | A callback that, when called, changes the error to what's passed as the first argument |
228
-
| onChange | PropTypes.func | A callback that accepts new code and transpiles it |
229
-
| element | React.Element | The result of the transpiled code that is previewed |
230
-
231
-
> Note: The code prop doesn't reflect the up-to-date code, but the `code` prop, that is passed to the `LiveProvider`.
232
-
233
-
## FAQ
234
-
235
-
> **I want to use experimental feature x but Sucrase doesn't support it! Can I use babel instead?**
236
-
237
-
`react-live` doesn't currently support configuring the transpiler and it ships with Sucrase. The current workaround for using some experimental features `Sucrase` doesn't support would be to use the `transformCode` prop on `LiveProvider` to transform your code with `babel` alongside `Sucrase`.
238
-
239
-
## Comparison to [component-playground](https://github.com/FormidableLabs/component-playground)
240
-
241
-
There are multiple options when it comes to live, editable React component environments. Formidable actually has **two** first class projects to help you out: [`component-playground`](https://github.com/FormidableLabs/component-playground) and [`react-live`](https://github.com/FormidableLabs/react-live). Let's briefly look at the libraries, use cases, and factors that might help in deciding which is right for you.
242
-
243
-
Here's a high-level decision tree:
244
-
245
-
- If you want **fast and easy** setup and integration, then `component-playground` may be the ticket!
246
-
- If you want **a smaller bundle**, **SSR**, and **more flexibility**, then `react-live` is for you!
-**Bundle size**: `component-playground` has a larger bundle, but uses a more familiar editor setup. `react-live` is smaller, but more customized editor around `prism`.
252
-
-**Ease vs. flexibility**: `react-live` is more modular/customizable, while `component-playground` is easier/faster to set up.
253
-
-**Extra features**: `component-playground` supports raw evaluation and pretty-printed output out-of-the-box, while `react-live` does not.
254
-
-**Error handling**: `component-playground` might have more predictable error handling than `react-live` in some cases (due to `react-dom`).
38
+
Please see our [contributing guide](CONTRIBUTING.md).
0 commit comments