react-runner

react-runner

Run your React code on the go https://nihgwu.github.io/react-runner/

Features

• Inline element
• Inline elements require React 16.3 or above
• Function component
• Class component, will class fields support
• Composing components with render or export default
• Support typescript or flow

Install

# Yarn
yarn add react-runner

# NPM
npm install --save react-runner

Props

• children function({ element, error }), required render props
• code string, required the code to be ran
• scope object globals that could be used in code
• type string the type system of the code, code be typescript or flow

Usage

import Runner from 'react-runner'

// pseudo code
render(
  <Runner code={code} scope={scope} type={type}>
    {({ element, error }) => (error ? error : element)}
  </Runner>
)

or hooks (require React 16.8 or above)

import { useRunner } from 'react-runner'

const { element, error } = useRunner({ code, scope, type })

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:

import {
  LiveProvider,
  LiveEditor,
  LiveError,
  LivePreview,
} from 'react-live-runner'

// pseudo code
render(
  <LiveProvider code={code}>
    <LiveEditor />
    <LiveError />
    <LivePreview />
  </LiveProvider>
)

or you can use render props

import LiveRunner, { CodeEditor } from 'react-live-runner'

// pseudo code
render(
  <LiveRunner sourceCode={sourceCode} scope={scope} type={type}>
    {({element, error, code, onChange }) => (
      <div>
        <CodeEditor code={code} onChange={onChange} />
        {error ? error : element)}
      </div>
    )}
  </LiveRunner>
)

or hooks (require React 16.8 or above)

import { useLiveRunner } from 'react-live-runner'

const { element, error, code, onChange } = useLiveRunner({
  sourceCode,
  scope,
  type,
})

or use react-runner directly

import { useState, useEffect } from 'react'
import { useRunner } from 'react-runner'

const [code, onChange] = useState(sourceCode)
const { element, error } = useRunner({ code, scope, type })

useEffect(() => {
  onChange(sourceCode)
}, [sourceCode])

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

License

MIT © Neo Nie