Live-reacto NPM

⚡️ Live Reacto

A Simple and flexible playground for live editing React code

React live component

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).