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
renderorexport default - Server Side Rendering
importstatement- 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
# Yarn
yarn add react-runner
# NPM
npm install --save react-runnerOptions
- code
string, required the code to be ran - scope
objectglobals that could be used incode
Usage
import { Runner } from 'react-runner'
const element = <Runner code={code} scope={scope} onRendered={handleRendered} />or use hook useRunner with cache support
import { useRunner } from 'react-runner'
const { element, error } = useRunner({ code, scope })import statement and multi files
import { importCode } from 'react-runner'
import * as YourPkg from 'your-pkg'
const baseScope = {
/* base globals */
}
const scope = {
...baseScope,
// scope used by import statement
import: {
constants: { A: 'a' },
'your-pkg': YourPkg,
'./local-file': importCode(localFileContent, baseScope),
},
}then in your live code you can import them
import { A } from 'constants'
import Foo, { Bar } from 'your-pkg'
import What, { Ever } from './local-file'
export default function Demo() {
/* render */
}Browser support
"browserslist": [
"Chrome > 61",
"Edge > 16",
"Firefox > 60",
"Safari > 10.1"
]
Resources
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
import {
LiveProvider,
LiveEditor,
LiveError,
LivePreview,
} from 'react-live-runner'
...
<LiveProvider code={code} scope={scope}>
<LiveEditor />
<LivePreview />
<LiveError />
</LiveProvider>
...or hooks for better custom rendering
import { useLiveRunner, CodeEditor } from 'react-live-runner'
const { element, error, code, onChange } = useLiveRunner({
initialCode,
scope,
transformCode,
})
...
<>
<CodeEditor value={code} onChange={onChange}>
<div>{element}</div>
{error && <pre>{error}</pre>}
</>
...or use react-runner directly
import { useState, useEffect } from 'react'
import { useRunner } from 'react-runner'
const [code, onChange] = useState(initialCode)
const { element, error } = useRunner({ code, scope })
useEffect(() => {
onChange(initialCode)
}, [initialCode])
...
<>
<textarea value={code} onChange={event => onChange(event.target.value)}>
<div>{element}</div>
{error && <pre>{error}</pre>}
</>
...Check the real world usage here https://github.com/nihgwu/react-runner/blob/master/website/src/components/LiveRunner.tsx
License
MIT © Neo Nie