# live-reacto

> A Simple and flexible playground for live editing React code.

Latest version **2.0.1** (published 2022-08-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install live-reacto
pnpm add live-reacto
yarn add live-reacto
bun add live-reacto
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2022-08-07 |
| First published | 2021-09-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Haikel Fazzani |
| Maintainers | haikel |
| Keywords | react, live, prism, syntax highlighter, component |

## Links

- npm: https://www.npmjs.com/package/live-reacto
- Repository: https://github.com/haikelfazzani/live-reacto
- Homepage: https://haikelfazzani.github.io/live-reacto
- Issues: https://github.com/haikelfazzani/live-reacto/issues
- npm.io page: https://npm.io/package/live-reacto

## Alternatives

- [@oh-my-pi/pi-natives](https://npm.io/package/@oh-my-pi/pi-natives.md) — 51.8K weekly downloads
- [@capgo/capacitor-light-sensor](https://npm.io/package/@capgo/capacitor-light-sensor.md) — 3.0K weekly downloads
- [@heyhuynhgiabuu/pi-diff](https://npm.io/package/@heyhuynhgiabuu/pi-diff.md) — 492 weekly downloads
- [@lotsa/verdant-lang-asm](https://npm.io/package/@lotsa/verdant-lang-asm.md) — 38 weekly downloads
- [new-era-syntax](https://npm.io/package/new-era-syntax.md) — 20 weekly downloads

## Recent versions

- 2.0.1 (latest) — 2022-08-07
- 2.0.0 — 2022-08-07
- 1.0.10 — 2021-09-15
- 1.0.9 — 2021-09-14
- 1.0.8 — 2021-09-11
- 1.0.7 — 2021-09-10
- 1.0.6 — 2021-09-10
- 1.0.5 — 2021-09-09
- 1.0.4 — 2021-09-08
- 1.0.3 — 2021-09-07
- 1.0.2 — 2021-09-06
- 1.0.1 — 2021-09-06
- 1.0.0 — 2021-09-06

## README

# ⚡️ Live Reacto  
A Simple and flexible playground for live editing React code

![React live component](https://badgen.net/bundlephobia/dependency-count/live-reacto) ![React live component](https://badgen.net/npm/v/live-reacto) ![React live component](https://badgen.net/npm/dt/live-reacto) 

### [Demo](https://wutility.github.io/live-react/)

# 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 <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](src/examples).
- All pull requests are welcome.

# License
MIT

---
_Source: https://npm.io/package/live-reacto · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._