Run your React code on the go
npm install react-live-runnerRun your React code on the go https://react-runner.vercel.app
- 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
``bashYarn
yarn add react-runner
Options
- code
, _required_ the code to be ran
- scope object globals that could be used in codeUsage
jsx
import { Runner } from 'react-runner'const element =
`or use hook
with cache support`jsx
import { useRunner } from 'react-runner'const { element, error } = useRunner({ code, scope })
`$3
js
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
js
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
- Play React
- CodeMirror for React Runner
- Storybook Addon
react-live-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-runnerjsx
import {
LiveProvider,
LiveEditor,
LiveError,
LivePreview,
} from 'react-live-runner'...
...
`or hooks for better custom rendering
jsx
import { useLiveRunner, CodeEditor } from 'react-live-runner'const { element, error, code, onChange } = useLiveRunner({
initialCode,
scope,
transformCode,
})
...
<>
{element}
{error && {error}}
...
`or use
directly`jsx
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])
...
<>