# React SDK

import LiveCodes from '../../src/components/LiveCodes.tsx';

The React SDK is a thin wrapper around the [JavaScript SDK](js-ts.html.md) to provide an easy to use react component, yet retaining the full power, by having access to the [SDK methods](js-ts.html.md)#sdk-methods).

## Demo

export const reactSDKDemo = {
  jsx: `import LiveCodes from "livecodes/react";\n\nconst App = () => {\n  const params = {\n    html: "<h1>Hello World!</h1>",\n    css: "h1 {color: blue;}",\n    js: 'console.log("Hello, World!")',\n    console: "open",\n  };\n\n  return <LiveCodes params={params} />;\n};\n\nexport default App;\n`,
};

<LiveCodes params={reactSDKDemo} height="60vh" />

## Installation

Please refer to the [SDK installation](./index.html.md)#installation) section.

## Usage

The React component is provided as the default export from `livecodes/react`.

```jsx title="JSX" livecodes render=link lang=react
import LiveCodes from 'livecodes/react';

export default () => <LiveCodes />;
```

### TypeScript Support

Prop types are exported as `Props` from `livecodes/react`.

```tsx title="TSX" livecodes render=link lang=react.tsx
import LiveCodes, { type Props } from 'livecodes/react';

const options: Props = {
  // embed options
};
export default () => <LiveCodes {...options} />;
```
<p />

For convenience, the following types are also exported from `livecodes/react`:<br />
`Code`, `Config`, `EmbedOptions`, `Language`, `Playground`.

TypeScript types are [documented here](../api/globals.md).

### Props

All [embed options](js-ts.html.md)#embed-options) are available as props with the corresponding types.

Example:

```jsx title="JSX" livecodes render=link lang=react
import LiveCodes from 'livecodes/react';

const config = {
  markup: {
    language: 'markdown',
    content: '# Hello World!',
  },
};
export default () => <LiveCodes config={config} view="result" />;
```
<p />

In addition, the following props are also available:

- `className`

  Type: `string`.

  Class name(s) to add to playground container element.

  Example:

  ```jsx title="JSX" livecodes render=link lang=react
  import LiveCodes from 'livecodes/react';

  export default () => <LiveCodes className="centered" />;
  ```

- `height`

  Type: `string`.

  Sets the [height of playground container](js-ts.html.md)#height) element.

  Example:

  ```jsx title="JSX" livecodes render=link lang=react
  import LiveCodes from 'livecodes/react';

  export default () => <LiveCodes height="500px" />;
  ```

- `style`

  Type: `Record<string, string>`.

  Defines styles to add to playground container element. Styles set here override the [default styles](js-ts.html.md)#default-styles).

  Example:

  ```tsx title="JSX" livecodes render=link lang=react
  import LiveCodes from 'livecodes/react';

  const style = {
    margin: 'auto',
    width: '80%',
  };
  export default () => <LiveCodes style={style} />;
  ```

- `sdkReady`

  Type: `(sdk: Playground) => void`.

  A callback function, that is provided with an instance of the [JavaScript SDK](js-ts.html.md) representing the current playground. This allows making use of full capability of the SDK by calling [SDK methods](js-ts.html.md)#sdk-methods).

  Example:

  ```tsx title="TSX" livecodes render=link lang=react.tsx
  import { useState } from 'react';
  import LiveCodes, { type Props } from 'livecodes/react';
  import type { Playground } from 'livecodes';

  export default () => {
    const [playground, setPlayground] = useState<Playground>();

    const onReady = (sdk: Playground) => {
      setPlayground(sdk);
    };

    const run = async () => {
      await playground?.run();
    };

    const options: Props = {
      config: {
        markup: {
          language: 'html',
          content: '<h1>Hello World!</h1>',
        },
      },
    };

    return (
      <>
        <LiveCodes {...options} sdkReady={onReady} />
        <button onClick={run}>Run</button>
      </>
    );
  };
  ```

### Reactive Props

Changing any prop will cause the playground to reload with the new options.
However, changing the `config` prop is an exception — it updates the playground in place using the SDK method [`setConfig`](js-ts.html.md)#setconfig), without triggering a full reload.
This allows for a smooth update experience when only the configuration changes.

Example:

```jsx title="JSX" livecodes render=link lang=react
import { useState } from 'react';
import LiveCodes from 'livecodes/react';

export default () => {
  const [config, setConfig] = useState({
    markup: {
      language: 'html',
      content: '<h1>Hello World!</h1>',
    },
  });

  function switchToMarkdown() {
    setConfig({
      markup: {
        language: 'markdown',
        content: '# Hello World! (from Markdown)',
      },
    });
  }

  return (
    <>
      <LiveCodes config={config} />
      <button onClick={switchToMarkdown}>Switch to Markdown</button>
    </>
  );
};
```

## Storybook

See [storybook](pathname:///../stories/react/) for usage examples.

## Related

- [SDK Installation](./index.html.md)#installation)
- [Preact SDK](./preact.html.md)
- [Solid SDK](./solid.html.md)
- [Svelte SDK](./svelte.html.md)
- [Vue SDK](./vue.html.md)
- [Web Components SDK](./web-components.html.md)
- [Embedded Playgrounds](../features/embeds.html.md)