React Live

https://nearform.com/open-source/react-live/docs
Admin
React Live brings the ability to render React components with editable source code and live preview,...
Tokens:4,679
Snippets:36
Trust Score:10
Update:11 months ago
Show doc for...
Tokens:
Raw
### Install React-Live with npm or yarn

Source: https://nearform.com/open-source/react-live/docs/installation

Instructions for installing the react-live package using either npm or yarn package managers. This is the first step to using the library in your project.

```bash
npm install react-live
```

```bash
yarn add react-live
```

--------------------------------

### Basic React-Live Component Usage

Source: https://nearform.com/open-source/react-live/docs/installation

A simple example demonstrating how to use the LiveProvider, LiveEditor, LiveError, and LivePreview components from the react-live library. This setup allows for live editing and previewing of React components.

```jsx
import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live";

<LiveProvider code="<strong>Hello World!</strong>">
  <LiveEditor />
  <LiveError />
  <LivePreview />
</LiveProvider>;
```

--------------------------------

### Render React Class Component in React Live

Source: https://nearform.com/open-source/react-live/docs/usage

Demonstrates how to define and render a React class component within React Live. This example shows a basic class component that renders a 'Hello World!' message. It requires React to be in scope.

```jsx
class Example extends React.Component {
  render() {
    return <strong>Hello World!</strong>;
  }
}
```

--------------------------------

### Basic React Live Editor and Preview Setup

Source: https://nearform.com/open-source/react-live/docs/index

Sets up the core React Live components, LiveEditor and LivePreview, to display editable code and its live rendered output. The `LiveProvider` manages the state and rendering. This snippet assumes a `code` variable holds the JSX to be rendered.

```jsx
import { LiveProvider, LiveEditor, LivePreview } from "react-live";  
  
<LiveProvider code={code}>  
  <div className="grid grid-cols-2 gap-4">  
    <LiveEditor className="font-mono" />  
    <LivePreview />  
  </div>  
</LiveProvider>
```

--------------------------------

### React Live Setup with Error Display

Source: https://nearform.com/open-source/react-live/docs/index

Implements a React Live setup that includes a `LiveError` component to display any syntax errors detected in the code. This provides immediate feedback to the developer. The `LiveProvider` handles error detection, and `LiveError` renders the error message.

```jsx
import { LiveProvider, LiveEditor, LivePreview, LiveError } from "react-live";  
  
<LiveProvider code={code}>  
  <div className="grid grid-cols-2 gap-4">  
    <LiveEditor className="font-mono" />  
    <LivePreview />  
    <LiveError className="text-red-800 bg-red-100 mt-2" />  
  </div>  
</LiveProvider>
```

--------------------------------

### Using Styled Components with React Live

Source: https://nearform.com/open-source/react-live/docs/usage

Shows how to integrate styled-components within React Live. This example defines a styled `Header` component and passes `styled` and `headerProps` to the scope. The `noInline` prop is set to `true` to allow imperative code execution.

```jsx
import styled from 'styled-components';

const headerProps = { text: 'I\'m styled!' };

const scope = {styled, headerProps};

const code = `
  const Header = styled.div`
    color: palevioletred;
    font-size: 18px;
  `

  render(<Header>{headerProps.text}</Header>)
`

<LiveProvider code={code} scope={scope} noInline={true}>
  <LiveEditor />
  <LiveError />
  <LivePreview />
</LiveProvider>
```

--------------------------------

### React Live Setup for Render Function Components

Source: https://nearform.com/open-source/react-live/docs/index

Configures React Live to use its `render` function for displaying components that require state or multiple elements. The `noInline` prop on `LiveProvider` is crucial for this functionality. It includes the editor, preview, and assumes a `code` variable contains the component definition.

```jsx
import { LiveProvider, LiveEditor, LivePreview } from "react-live";  
  
<LiveProvider code={code} noInline>  
  <div className="grid grid-cols-2 gap-4">  
    <LiveEditor className="font-mono" />  
    <LivePreview />  
  </div>  
</LiveProvider>
```

--------------------------------

### Using React Hooks in React Live

Source: https://nearform.com/open-source/react-live/docs/usage

Demonstrates the use of React Hooks, specifically `useState`, within React Live. It shows how to manage state and update the UI. To use hooks like `useState` directly, it must be explicitly passed in the scope or accessed via `React.useState`.

```jsx
() => {
  const [likes, increaseLikes] = React.useState(0);

  return (
    <>
      <p>{`${likes} likes`}</p>
      <button onClick={() => increaseLikes(likes + 1)}>Like</button>
    </>
  );
};
```

--------------------------------

### LiveProvider Component API

Source: https://nearform.com/open-source/react-live/docs/api

The LiveProvider component is the core of react-live. It provides the context for other components and handles code transpilation. It accepts several props to configure its behavior.

```APIDOC
## LiveProvider Component API

### Description

The `<LiveProvider />` component provides the `context` for all other react-live components and transpiles user code. Any props not explicitly handled are passed down to its children.

### Component

`<LiveProvider />`

### Props

#### `code` (PropTypes.string)
- Description: The code that should be rendered, apart from the user's edits.

#### `scope` (PropTypes.object)
- Description: Accepts custom global variables that the `code` can utilize.

#### `noInline` (PropTypes.bool)
- Description: If `true`, disables the evaluation and mounting of inline code. When `noInline` is used, the code must be a single expression (e.g., a function, class component, or JSX) that can be returned directly. If you need to render multiple components, set `noInline={true}`. Default: `false`.

#### `transformCode` (PropTypes.func)
- Description: A function that accepts and returns the code to be transpiled, allowing for pre-transpilation transformations.

#### `language` (PropTypes.string)
- Description: Specifies the language for correct syntax highlighting. Default: `jsx`.

#### `enableTypeScript` (PropTypes.bool)
- Description: Enables TypeScript support during transpilation. Default: `true`.

#### `disabled` (PropTypes.bool)
- Description: Disables editing in the `<LiveEditor />` component. Default: `false`.

#### `theme` (PropTypes.object)
- Description: A `prism-react-renderer` theme object for styling the code editor. See [prism-react-renderer themes](https://github.com/FormidableLabs/prism-react-renderer/tree/master/src/themes) for examples.

### Notes

- All subsequent react-live components must be rendered within a `<LiveProvider />` to communicate via context.
- When `noInline` is enabled, the provider enters a mode where code is not automatically evaluated or mounted. Examples must explicitly call `render` with valid JSX elements.
```

--------------------------------

### LiveProvider Component Configuration

Source: https://nearform.com/open-source/react-live/docs/api

The LiveProvider component serves as the context for other react-live components and handles code transpilation. It accepts various props to control its behavior, such as the code to be rendered, custom scopes, inline code evaluation, code transformation, language for syntax highlighting, TypeScript support, editing state, and themes.

```jsx
import { LiveProvider } from 'react-live';

<LiveProvider 
  code='const message = "Hello World!"; return <h1>{message}</h1>'
  scope={{ React: require('react') }}
  noInline={false}
  transformCode={code => code.replace('foo', 'bar')}
  language='jsx'
  enableTypeScript={true}
  disabled={false}
  theme={myTheme}
>
  {/* Other react-live components */}
</LiveProvider>
```

--------------------------------

### Using Custom Components with React Live

Source: https://nearform.com/open-source/react-live/docs/usage

Illustrates how to use a custom component, `<MyButton />`, within React Live. The custom component is imported and passed into the `scope`. Since `render()` is not used, `noInline` defaults to `false`.

```jsx
import { MyButton } from './components/MyButton';

const scope = { MyButton };

const code = `
  <MyButton />
`

<LiveProvider code={code} scope={scope}>
  <LiveEditor />
  <LiveError />
  <LivePreview />
</LiveProvider>
```

--------------------------------

### LiveEditor Component API

Source: https://nearform.com/open-source/react-live/docs/api

The LiveEditor component renders the code editing interface, acting as a wrapper around `react-simple-code-editor` and using `prism-react-renderer` for syntax highlighting.

```APIDOC
## LiveEditor Component API

### Description

The `<LiveEditor />` component displays the code editor, leveraging `react-simple-code-editor` and `prism-react-renderer` for syntax highlighting.

### Component

`<LiveEditor />`

### Props

#### `style` (PropTypes.object)
- Description: Allows overriding the default styles applied to the `LiveEditor` component.

#### `tabMode` (PropTypes.oneOf(["indentation", "focus"]))
- Description: Determines the behavior of the tab key. Can be set to `"indentation"` for standard indentation or `"focus"` to move focus. Default: `"indentation"`.
```

--------------------------------

### LiveEditor Component Usage

Source: https://nearform.com/open-source/react-live/docs/api

The LiveEditor component renders the code editor interface, built upon react-simple-code-editor and using prism-react-renderer for syntax highlighting. It allows for custom styling and configuration of tab key behavior.

```jsx
import { LiveEditor } from 'react-live';

<LiveEditor style={{ minHeight: 300 }} tabMode="focus" />
```

--------------------------------

### Render Inline JSX with React Live

Source: https://nearform.com/open-source/react-live/docs/index

Demonstrates how React Live renders a block of JSX directly into a preview pane. This is the default behavior for simple JSX structures. It requires the `react-live` package.

```jsx
<h3 style={{background: 'darkslateblue',color: 'white',padding: 8,borderRadius: 4}}>
  Hello World! 👋
</h3>
```

--------------------------------

### LivePreview Component Rendering

Source: https://nearform.com/open-source/react-live/docs/api

The LivePreview component renders the actual generated component from the transpiled code, wrapped within an error boundary. It allows customization of the wrapper element.

```jsx
import { LivePreview } from 'react-live';

<LivePreview Component='main' />
```

--------------------------------

### LivePreview Component API

Source: https://nearform.com/open-source/react-live/docs/api

The LivePreview component renders the live-generated component from the edited code within an error boundary.

```APIDOC
## LivePreview Component API

### Description

The `<LivePreview />` component renders the component generated by the transpiled code. It is wrapped in an error boundary to catch and display rendering errors.

### Component

`<LivePreview />`

### Props

#### `Component` (PropTypes.node)
- Description: An optional element that wraps the generated code. Default: `div`.
```

--------------------------------

### withLive() HOC API

Source: https://nearform.com/open-source/react-live/docs/api

The withLive() method is a higher-order component that injects live-editing props from LiveProvider into a component, allowing for custom integrations or replacements of default react-live components.

```APIDOC
## withLive() HOC API

### Description

The `withLive()` method creates a higher-order component (HOC) that injects live-editing props, provided by `LiveProvider`, into the wrapped component. This HOC is useful for adding new components to react-live or replacing default ones with custom behavior.

### Usage

`const EnhancedComponent = withLive(WrappedComponent);
<LiveProvider ...>
  <EnhancedComponent />
</LiveProvider>`

### Injected Props

When a component is wrapped with `withLive()`, it receives the following props:

#### `code` (PropTypes.string)
- Description: Reflects the `code` prop passed to the `LiveProvider`. Note: This prop does not necessarily reflect the most up-to-date code if edits have been made but not yet processed by the provider.

#### `error` (PropTypes.string)
- Description: An error string if the code has thrown an exception during preview.

#### `onError` (PropTypes.func)
- Description: A callback function that allows you to update the error state. When called, it changes the error to the value passed as the first argument.

#### `onChange` (PropTypes.func)
- Description: A callback function that accepts new code, transpiles it, and potentially updates the state.

#### `element` (React.Element)
- Description: The React element resulting from the transpiled code, ready for preview.
```

--------------------------------

### withLive HOC for Enhanced Components

Source: https://nearform.com/open-source/react-live/docs/api

The withLive higher-order component injects live-editing props (code, error, onError, onChange, element) provided by LiveProvider into a component. This allows for the creation or replacement of default react-live components with custom behaviors.

```javascript
import { withLive } from 'react-live';

const MyComponent = withLive(({ code, error, onChange, element }) => (
  <div>
    {/* Render your component using code, error, onChange, and element */}
    {element}
  </div>
));
```

--------------------------------

### React Live Syntax Error Handling

Source: https://nearform.com/open-source/react-live/docs/index

Shows how React Live captures and displays syntax errors within the editable code. The `LiveError` component is used to present these errors to the user, aiding in debugging. This snippet demonstrates an intentional syntax error.

```javascript
const badVariable = ;
```

--------------------------------

### Render Complex Components with React Live's Render Function

Source: https://nearform.com/open-source/react-live/docs/index

Illustrates using React Live's `render` function with the `noInline` prop to render more complex components, including functional components with hooks like `useState`. This allows for multi-element JSX and stateful logic to be displayed and interacted with.

```typescript
type Props = {
  label: string;
}
const Counter = (props: Props) => {
  const [count, setCount] =
    React.useState<number>(0);
  return (
    <div>
      <h3 style={{background: 'darkslateblue',color: 'white',padding: 8,borderRadius: 4}}>
        {props.label}: {count} 🧮
      </h3>
      <button
        onClick={() =>
          setCount(c => c + 1)
        }>
        Increment
      </button>
    </div>
  );
};
render(<Counter label="Counter" />);
```

--------------------------------

### LiveError Component API

Source: https://nearform.com/open-source/react-live/docs/api

The LiveError component is responsible for displaying any errors that occur during code execution or transpilation. It passes through any received props to a `<pre>` element.

```APIDOC
## LiveError Component API

### Description

The `<LiveError />` component renders any errors encountered during code execution or transpilation. It forwards any additional props to the underlying `<pre>` element.

### Component

`<LiveError />`

### Notes

- Currently, the error display is cleared when the component unmounts and no error is present.
```

--------------------------------

### LiveError Component Display

Source: https://nearform.com/open-source/react-live/docs/api

The LiveError component is responsible for displaying any errors encountered during code execution or transpilation. It passes through any props to a 'pre' element and is hidden when no errors are present.

```jsx
import { LiveError } from 'react-live';

<LiveError />
```
Tokens:
Raw