⚡️ Live Reacto

A Simple and flexible playground for live editing React code

!React live component !React live component !React live component

$3

Installation

``bash
$ npm install live-reacto

or via yarn

$ yarn add live-reacto
`

Usage

`jsx
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

}

render();

// External component
const Hello = () =>

Hello world

language="jsx"
code={codeTest}
readOnly={false}
onlyHighlight={false}
bindings={{ Hello }} //-> bind component
>



`

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 |

$3

- 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