Contents 1. What is ReactLive? What can be done? 2. What constitutes ReactLive? How does it work? 3. Comprehensive examplesCopy the code

1. What is ReactLive? What can be done?

React Live provides React component-level online editing and preview functions.

  • React Live brings you the ability to render React components with editable source code and live preview.

    import { LiveProvider, LiveEditor, LiveError, LivePreview } from ‘react-live’ ​

2. What constitutes ReactLive? How does it work?

  • The core composition

  • Buble: Lightweight ES2015 syntax converter

  • The blazing fast, batteries-included ES2015 compiler.

  • React-simple-code-editor: displays code

  • A simple no-frills code editor with syntax highlighting.

  • Prism-react-renderer: code highlighting

  • A lean Prism highlighter component for React

  • Core principles

  • As you can see from the following code, dependencies in the code snippet require external injection:

  • React is injected by default;

  • Custom content within the scope is also injected;

3. Comprehensive examples

  • Support echarts

  • Supports Hooks: useEffect, useState, and useRef

import React, { useState, useEffect, useRef } from "react"; import * as echarts from "echarts"; import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live"; import dracula from "prism-react-renderer/themes/dracula"; interface ReactEditorProps { code: string; onChange? : (code: string) => void; codeProps? : object; showEditor? : boolean; } export default function ReactEditor(props: ReactEditorProps) { const { code, onChange, codeProps = {}, showEditor = true } = props; const scope = { useState, useEffect, useRef, echarts, props: codeProps }; const transformCode = (code: string) => { const regex = /\(.*? \)\s*=>/; const removedArgumentProps = code.replace(regex, "() => "); return removedArgumentProps; }; return ( <LiveProvider code={code} scope={scope} transformCode={transformCode} theme={dracula} > <div style={{ display: "flex" }}> <div style={{flex: "1 1 0px"}}> <LivePreview /> </div> {showEditor && ( <div style={{flex: "1 1 0px"}}> <LiveEditor onChange={onChange} /> </div> )} </div> <LiveError /> </LiveProvider> ); }Copy the code

Reference:

ReactLive:

react-live.netlify.com/

Github.com/FormidableL…

The react – simple – code – the editor:

Github.com/satya164/re…

The prism – react – the renderer:

Github.com/FormidableL…

Buble:

Github.com/bublejs/bub…