react-livecode

Experimental

Live code evaluating:

• Evaluate every expressions your typed, no need to use console.log.
• Inspect result side by side.
• Support modules (using import).

Install

npm install react-livecode

Usage

import LiveCode from 'react-livecode'
import chunk from 'lodash/chunk'

render(
  <LiveCode
    scope={{chunk}}
    code={`
      2 ** 3
      chunk(['a', 'b', 'c', 'd'], 2)
    `}
  />
)

LiveCode props

| Prop | Type | Default | Description | | ----------- | --------- | -------------- | ----------------------------------------------------------------------------------------- | | scope | Object | {} | Scope variables | | code | string | '' | Code to evaluate | | split | string | 'horizontal' | How to split editor and console, can be horizontal or vertical | | autoFocus | boolean | false | Auto focus editor | | modules | boolean | true | Enable using of modules |

Code highlighting

Import Prism styles to your page:

import 'prismjs/themes/prism.css'

Or, load from external CDN:

<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/themes/prism.css"
/>