React Preview Editor

React-Preview-Editor is a BYO live editor and preview for code. It is built on top of:

• react-simple-code-editor,
• prism-react-renderer, and
• React Hooks

Getting Started

Take a look at the CodeSandbox here: https://codesandbox.io/s/wk69q5zv9k. To set this up locally, add the following:

yarn add @matthamlin/react-preview-editor [email protected] [email protected]
# or
npm add @matthamlin/react-preview-editor [email protected] [email protected]

Optionally Install @babel/standalone to transform JSX and future JavaScript features so the code can run within your browser.

Then import the components, and render them:

import { Provider, Editor, Preview } from '@matthamlin/react-preview-editor'
import { transform } from '@babel/standalone'

function transformCode(code) {
  return transform(code, { presets: [['stage-0', { decoratorsLegacy: true }], 'react'] }).code
}

render(
  <Provider
    code={`function App() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>Update count: {count}</button>
  );
}

render(<App />);`}
    transformCode={transformCode}
  >
    <Preview />
    <Editor />
  </Provider>,
)

Advanced Usage

react-preview-editor also exposes useEditor and usePreview hooks to build custom Editor and Preview components.

useEditor

The useEditor hook will provide you the following:

const { value, onValueChange, highlight } = useEditor({ getHighlighterProps })

• value is the current code that the user is editing
• onValueChange is a function that handles taking in the raw code as a string and updating the state of the code the user has entered
• highlight is a function that is called with the code and returns a node that will be rendered to highlight the code

By default, highlight will return the Highlighter component from prism-react-renderer

• getHighlighterProps is a required argument, that should return an object of props, this will be provided to the Highlighter component returned from highlight

usePreview

usePreview is an effectful hook, that will attempt to render the current code using the provided renderer

function Preview() {
  usePreview({ scope: { customVariableInScope: 5 }, render })
  return <div />
}

• scope is an object of additional variables exposed within the live preview code (this is shallowly merged with the default values documented below in Features)
• render is a function that calls ReactDOM.render, you can customize this by using the createRenderer export of the package where you provide a selector for an element that is provided to document.querySelector. Or you can provide a custom renderer here too.

Features

By default, react-preview-editor adds the following to scope when evaluating the code to render in the Preview component:

• React
• Component
• Fragment
• useState
• useReducer
• useEffect
• useMemo
• useCallback
• useContext
• Other values can be added to scope by providing an object to the scope prop on the Provider component