React runner

👈🏻 Back

Getting started with react-runner is straight forward:

Simple Demo

import { Runner } from 'react-runner';

// Load code as string in Webpack 5
import code from './../demo-1.tsx?raw';

export default function CodeContainer() {
  return <Runner code={code} />;
}
Output
Hello from Demo1 👋

Code that should be executed on behalf of react-runner has to be loaded as non interpreted JavaScript code. This can be achieved by specifying the loader as part of the file import. Depending on the bundler you are using the import statement may look different.

For Webpack 4 you can use !!raw-loader if configured properly.

External dependencies

If you reference external dependecies, you have to define it on the runners scope by leveraging the build system of the hosting app. For instance: If you want to use @chakra-ui/react in your example code, import the dependency as you would normally do and put it as a dependency in scope.import.

import * as React from 'react';

import * as chakraUI from '@chakra-ui/react';
import { Runner } from 'react-runner';

// Load code as string
import code from './../demo-2.tsx?raw';

export default function CodeContainer() {
  return (
    <Runner
      scope={{
        import: {
          react: React,
          '@chakra-ui/react': chakraUI
        }
      }}
      code={code}
    />
  );
}
Output

Internal packages dependencies

If you reference external dependecies, you have to define it on the runners scope by leveraging the build system of the hosting app. For instance: If you want to use @chakra-ui/react in your example code, import the dependency as you would normally do and put it as a dependencFry in scope.import.

import { Runner } from 'react-runner';

// Load whole design-system via the same bundler used for application
import * as ds from './../../components/design-system';
// Load code as string
import code from './../demo-3.tsx?raw';

export default function CodeContainer() {
  return (
    <Runner
      scope={{
        import: {
          '@design-system': ds
        }
      }}
      code={code}
    />
  );
}
Output