React Sandpack
React components that help you create a full fledged online web application editor. Powered by Sandpack, the online bundler used by CodeSandbox.
Getting Started
You can install this package by running npm i --save @codesandbox/react-sandpack
or yarn add @codesandbox/react-sandpack
.
An example implementation of this is:
import React from 'react';import render from 'react-dom';import FileExplorer CodeMirror BrowserPreview SandpackProvider from 'react-sandpack/es/components';import 'react-smooshpack/dist/styles.css'; const files = '/index.js': code: "document.body.innerHTML = `<div>${require('uuid')}</div>`" ; const dependencies = uuid: 'latest'; const App = <SandpackProvider = = ="/index.js"> <div => <FileExplorer = /> <CodeMirror = /> <BrowserPreview = /> </div> </SandpackProvider>; ;
This renders a simple FileExplorer
, with an editor and a preview with navigation.
Writing a custom component
We expose the full API of Sandpack, you can access it by using a SandpackConsumer
or the withLive
function, both exported:
<SandpackConsumer> { // Your logic! return <div>Hello</div>; }</SandpackConsumer>
The Sandpack context consists of these properties: