Skip to main content

React SDK

The React SDK is a thin wrapper around the JavaScript SDK to provide an easy to use react component, yet retaining the full power, by having access to the SDK methods.

Demo​

show code
import { createPlayground } from 'livecodes';

const options = {
  "params": {
    "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"
  }
};
createPlayground('#container', options);

Installation​

Please refer to the SDK installation section.

Usage​

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

JSX
import LiveCodes from 'livecodes/react';

export default () => <LiveCodes />;
Edit in LiveCodes

TypeScript Support​

Prop types are exported as Props from livecodes/react.

TSX
import LiveCodes, { type Props } from 'livecodes/react';

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

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

TypeScript types are documented here.

Props​

All embed options are available as props with the corresponding types.

Example:

JSX
import LiveCodes from 'livecodes/react';

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

In addition, the following props are also available:

  • className

    Type: string.

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

    Example:

    JSX
    import LiveCodes from 'livecodes/react';

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

  • height

    Type: string.

    Sets the height of playground container element.

    Example:

    JSX
    import LiveCodes from 'livecodes/react';

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

  • style

    Type: Record<string, string>.

    Defines styles to add to playground container element. Styles set here override the default styles.

    Example:

    JSX
    import LiveCodes from 'livecodes/react';

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

  • sdkReady

    Type: (sdk: Playground) => void.

    A callback function, that is provided with an instance of the JavaScript SDK representing the current playground. This allows making use of full capability of the SDK by calling SDK methods.

    Example:

    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>
        </>
      );
    };
    Edit in LiveCodes

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, without triggering a full reload. This allows for a smooth update experience when only the configuration changes.

Example:

JSX
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>
    </>
  );
};
Edit in LiveCodes

Storybook​

See storybook for usage examples.

Sponsors