https://github.com/lukasmoellerch/playground-hook
https://github.com/lukasmoellerch/playground-hook
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/lukasmoellerch/playground-hook
- Owner: lukasmoellerch
- Created: 2020-08-01T12:10:35.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T13:01:21.000Z (over 2 years ago)
- Last Synced: 2025-03-26T11:42:43.960Z (about 2 months ago)
- Language: TypeScript
- Size: 832 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
playground-hook
A simple hook that allows you to include JavaScript playgrounds in your React app.
- Supports mutliple files
- Transpiles the source code using scurase
- Dynamically loads modules when they are needed
- The UI is up to you
## Example
codesandbox: https://codesandbox.io/s/boring-mendeleev-tcpdv
```tsx
const [entry, setEntry] = useState(code);
const { node, error, run } = usePlayground(
{
entry: entry
},
"entry",
{
react: lazyModule(React)
}
);
return (
setEntry(e.target.value)} />
Run
{node}
);
```
## Usage
The primary export of this package is a hook named `usePlayground` with the following signature:
```tsx
function usePlayground(
codeModules: Record,
entry?: string,
modules?: Record Promise>, () => Record | undefined]>
): {
error: Error | undefined;
node: React.ReactNode;
run: () => readonly [Promise, React.MutableRefObject<...>] | readonly [...];
promise: React.MutableRefObject<...>;
cancel: React.MutableRefObject<...>;
}
```
`codeModules` is a mapping that specifies the "files" that should be available in the execution context and which should be transpiled internally. When you call `run` the module named `entry` is executed. Using the `modules` parameter additional modules can be specified which are available as an object or a dynamic import. You can use it to inject modules into the sandbox. If you for example want your UI library available in the playground you have to specify it in modules. The signature of modules might look weird, but it is required to allow both the SSR use case and to dynamically load the parts of the module which are required. This package also exports a utility function called `lazyModule` which returns an object that can be passed to modules as a value. You have to provide `lazyModule` with a synchronously loaded variant of your module and you can optionally provide a variant that is loaded asynchronously if it is required. This is useful if you want some parts of your library available all the time but don't want the entire library loaded when it is not needed.
## Bundle Size
The bundle provided by the package as it is distributed by npm includes a modified build of sucrase that doesn't support typescript and flow type annotations
