Skip to content

Latest commit

 

History

History
108 lines (86 loc) · 2.78 KB

introduction.mdx

File metadata and controls

108 lines (86 loc) · 2.78 KB
sidebar_position slug
1
/

import { DemoLiveEditor } from "../website/src/components/live-edit";

Introduction

React Live brings you the ability to render React components with editable source code and live preview. React Live is structured modularly and lets you style and compose its components freely. The following demos show typical use cases including the editor, preview, and error pane components.

To see React Live in action, make changes to the following editor panes:

Inline Demo

React Live by default takes a block of JSX and renders it in the preview as if it were returned from a functional component. A header component represented in JSX is rendered as shown below with the style props.

export const jsxExample = `

Hello World! 👋

`.trim(); 
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>

Render-function Demo

To render a series of components or render components beyond just JSX, React Live also provides a render function to pass JSX into when the noInline prop is present. This lets you render multiple or functional components with hooks. This example shows a functional component with a useState hook.

export const noInlineExample = 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" />).trim();

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>

Syntax Error Demo

React Live can also display customizable errors when your code contains errors.

export const syntaxError = const badVariable = ;.trim();

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>