Getting started with react-runner is straight forward:
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} />;
}
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}
/>
);
}
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}
/>
);
}