React Runner

Run your React code on the go

PlaygroundReact
nihgwu/react-runnerreact-runner.vercel.appreact-runner

README

React Runner


Run your React code on the go https://react-runner.vercel.app

Features


- Inline element
- Function component
- Class component, with class fields support
- Composing components with render or export default
- Server Side Rendering
- import statement
- Multi files
- Typescript

With React Runner, you can write your live code in the real world way, check out Hacker News in react-runner vs in real world, with the same code

You can even build your own async runner to support dynamic imports, try Play React

Install


  1. ``` sh
  2. # Yarn
  3. yarn add react-runner

  5. # NPM
  6. npm install --save react-runner
  7. ```

Options


- code string, _required_ the code to be ran
- scope object globals that could be used in code

Usage


  1. ``` js
  2. import { Runner } from 'react-runner'

  4. const element = <Runner code={code} scope={scope} onRendered={handleRendered} />
  5. ```

or use hook useRunner with cache support

  1. ``` js
  2. import { useRunner } from 'react-runner'

  4. const { element, error } = useRunner({ code, scope })
  5. ```

import statement and multi files


  1. ``` js
  2. import { importCode } from 'react-runner'
  3. import * as YourPkg from 'your-pkg'

  5. const baseScope = {
  6.   /* base globals */
  7. }

  9. const scope = {
  10.   ...baseScope,
  11.   // scope used by import statement
  12.   import: {
  13.     constants: { A: 'a' },
  14.     'your-pkg': YourPkg,
  15.     './local-file': importCode(localFileContent, baseScope),
  16.   },
  17. }
  18. ```

then in your live code you can import them

  1. ``` js
  2. import { A } from 'constants'
  3. import Foo, { Bar } from 'your-pkg'
  4. import What, { Ever } from './local-file'

  6. export default function Demo() {
  7.   /* render */
  8. }
  9. ```

Browser support


  1. ```
  2. "browserslist": [
  3.   "Chrome > 61",
  4.   "Edge > 16",
  5.   "Firefox > 60",
  6.   "Safari > 10.1"
  7. ]
  8. ```

Resources


- Play React
- CodeMirror for React Runner
- Storybook Addon

react-live-runner


react-runner is inspired by react-live heavily,
I love it, but I love arrow functions for event handlers instead of bind them manually as well as other modern features,
and I don't want to change my code to be compliant with restrictions, so I created this project,
use Sucrase instead of Bublé to transpile the code.

If you are using react-live in your project and want a smooth transition, react-live-runner is there for you which provide the identical way to play with, and react-live-runner re-exports react-runner so you can use everything in react-runner by importing react-live-runner

  1. ``` js
  2. import {
  3.   LiveProvider,
  4.   LiveEditor,
  5.   LiveError,
  6.   LivePreview,
  7. } from 'react-live-runner'

  9. ...
  10. <LiveProvider code={code} scope={scope}>
  11.   <LiveEditor />
  12.   <LivePreview />
  13.   <LiveError />
  14. </LiveProvider>
  15. ...
  16. ```

or hooks for better custom rendering

  1. ``` js
  2. import { useLiveRunner, CodeEditor } from 'react-live-runner'

  4. const { element, error, code, onChange } = useLiveRunner({
  5.   initialCode,
  6.   scope,
  7.   transformCode,
  8. })

  10. ...
  11. <>
  12.   <CodeEditor value={code} onChange={onChange}>
  13.   <div>{element}</div>
  14.   {error && <pre>{error}</pre>}
  15. </>
  16. ...
  17. ```

or use react-runner directly

  1. ``` js
  2. import { useState, useEffect } from 'react'
  3. import { useRunner } from 'react-runner'

  5. const [code, onChange] = useState(initialCode)
  6. const { element, error } = useRunner({ code, scope })

  8. useEffect(() => {
  9.   onChange(initialCode)
  10. }, [initialCode])

  12. ...
  13. <>
  14.   <textarea value={code} onChange={event => onChange(event.target.value)}>
  15.   <div>{element}</div>
  16.   {error && <pre>{error}</pre>}
  17. </>
  18. ...
  19. ```

Check the real world usage here https://github.com/nihgwu/react-runner/blob/master/website/src/components/LiveRunner.tsx

License


MIT © Neo Nie