react-live

react-live is a powerful React component library that allows you to render live editable code blocks directly within your React applications. It's an excellent tool for creating interactive documentation, code playgrounds, tutorials, and sandboxes where users can modify and see the immediate output of their code. The library leverages `prism-react-renderer` for syntax highlighting and provides a flexible API to control the code's execution environment.

Key components of `react-live`:

1. `LiveProvider`: This is the main context provider that wraps the other `react-live` components. It takes several important props:
* `code`: The initial or current code string to be displayed and executed.
* `scope`: An object containing variables, components, or functions that should be available within the live code's execution environment. This is crucial for allowing users to interact with your application's components or external libraries.
* `theme`: A `prism-react-renderer` theme object for syntax highlighting. You can import predefined themes or create custom ones.
* `transformCode`: A function that receives the raw code string and returns a transformed version before execution. This is useful for Babel transpilation, adding implicit `React` imports, or other pre-processing.
* `noInline`: A boolean prop. If `true`, the code is treated as a standard module (requiring an explicit `render` call or returning a React element from a function). If `false` (default), the code is implicitly wrapped in a function that returns its result (e.g., `<div>Hello</div>` would render directly).

2. `LiveEditor`: This component provides an editable text area where users can type and modify code. It automatically integrates with `LiveProvider` to get the current code and theme.

3. `LiveError`: This component displays any syntax errors or runtime errors that occur during the execution of the live code. It's essential for providing feedback to the user.

4. `LivePreview`: This component renders the actual output of the live code. Whatever the `LiveEditor` produces, `LivePreview` will display it.

Together, these components create a seamless experience for interactive code editing and previewing within a React application. `react-live` handles the transpilation and execution of the code in a safe sandbox environment, making it a robust solution for dynamic code demonstration.

Example Code

import React from 'react';
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
import dracula from 'prism-react-renderer/themes/dracula';

// A custom component to be available in the live code's scope
const CustomButton = ({ onClick, children }) => (
  <button
    style={{
      padding: '8px 16px',
      backgroundColor: '#61dafb',
      color: 'white',
      border: 'none',
      borderRadius: '4px',
      cursor: 'pointer',
      margin: '5px'
    }}
    onClick={onClick}
  >
    {children}
  </button>
);

const App = () => (
  <div style={{ maxWidth: '800px', margin: 'auto', padding: '20px' }}>
    <h1>react-live Example</h1>
    <p>Edit the code below and see the changes instantly!</p>

    <LiveProvider 
      code={`
        function MyComponent() {
          const [count, setCount] = React.useState(0);
          return (
            <div>
              <p>You clicked {count} times</p>
              <CustomButton onClick={() => setCount(count + 1)}>
                Click me
              </CustomButton>
              <CustomButton onClick={() => alert('Hello from live code!')}>
                Say Hello
              </CustomButton>
            </div>
          );
        }
        render(<MyComponent />);
      `}
      scope={{ React, CustomButton, useState: React.useState }}
      theme={dracula}
      noInline={false} // Set to true if you explicitly want to call render()
    >
      <div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
        <div style={{ border: '1px solid #ddd', borderRadius: '4px', overflow: 'hidden' }}>
          <h3 style={{ margin: '0', padding: '10px', backgroundColor: '#f0f0f0', borderBottom: '1px solid #ddd' }}>
            Live Editor
          </h3>
          <LiveEditor style={{ fontFamily: 'monospace', fontSize: '14px', minHeight: '150px' }} />
        </div>
        
        <LiveError 
          style={{
            color: 'white',
            backgroundColor: '#ff4d4f',
            padding: '10px',
            borderRadius: '4px',
            fontFamily: 'monospace'
          }}
        />
        
        <div style={{ border: '1px solid #ddd', borderRadius: '4px', padding: '15px' }}>
          <h3 style={{ margin: '0 0 10px 0', borderBottom: '1px solid #eee', paddingBottom: '10px' }}>
            Live Preview
          </h3>
          <LivePreview />
        </div>
      </div>
    </LiveProvider>
  </div>
);

export default App;

Example Code

Related Topics