⚡️ Live Reacto

A Simple and flexible playground for live editing React code

Demo

Installation

$ npm install live-reacto
# or via yarn 
$ yarn add live-reacto

Usage

import { LiveProvider, LiveEditor, LivePreview } from 'live-reacto';

// import your favorite prismjs theme
import "prismjs/themes/prism-dark.css";

const codeTest = `function App() {
  const [count, setCount] = React.useState(0);
  const onCount = () => setCount(count + 1);
  return <div>{count} <button onClick={onCount}>Click me</button></div>
}

render(<App />)`;

// External component
const Hello = () => <h1>Hello world</h1>

<LiveProvider
  language="jsx" 
  code={codeTest}
  readOnly={false}
  onlyHighlight={false}
  bindings={{ Hello }} //-> bind component
>
  <LiveEditor onChange={setCode} />
  <LivePreview onTransform={setTransform} />
</LiveProvider>

Props

• LiveProvider

| Prop | Type | Description | |--------------|--------------------------|-----------------------------------------------| |language | string | Language to be hightlighted (default: jsx) | |code | string | Some React code | |bindings | Object | Add an external component or library. | |onlyHighlight | Boolean | Disable LivePreview: works as Syntax highlighter.| |readOnly | Boolean | Disable editing on the LiveEditor (Default: false).|

• LiveEditor

| Prop | Type | Description | |----------|---------------|----------------------------------------------| |onChange | method | returns live coding | |style | Object | set css style for editor |

• LivePreview

| Prop | Type | Description | |------------|--------------|--------------------------------------------| |onTransform | method | returns the code transpiled by Babel |

Peer dependencies

• prismjs
• react
• react-dom
• react-error-boundary
• react-simple-code-editor
• @babel/standalone

Notes

• Full examples check src/examples.
• All pull requests are welcome.

License

MIT