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

# Yarn
yarn add react-runner
# NPM
npm install --save react-runner

Options

• codestring, required the code to be ran
• scopeobject globals that could be used in code

Usage

import{Runner}from'react-runner'constelement=<Runnercode={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*asYourPkgfrom'your-pkg'constbaseScope={/* base globals */}constscope={
...baseScope,// scope used by import statementimport: {constants: {A: 'a'},'your-pkg': YourPkg,'./local-file': importCode(localFileContent,baseScope),},}

then in your live code you can import them

import{A}from'constants'importFoo,{Bar}from'your-pkg'importWhat,{Ever}from'./local-file'exportdefaultfunctionDemo(){/* 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

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'
...
<LiveProvidercode={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,})...<><CodeEditorvalue={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])...<><textareavalue={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