live-reacto

A Simple and flexible playground for live editing React code.

Usage no npm install needed!

<script type="module">
  import liveReacto from 'https://cdn.skypack.dev/live-reacto';
</script>

README

⚡️ Live Reacto

A Simple and flexible playground for live editing React code

React live component React live component React live component

PLayground

Demo Codesandbox

Installation

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

Required Babel

<script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.15.6/babel.min.js"></script>

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

Notes

License

MIT