Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
.storybook
src
stories
tools
.gitignore
LICENSE.md
README.md
gulpfile.js
package.json
rollup.config.ts
tsconfig.json
tslint.json

README.md

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 files={files} dependencies={dependencies} entry="/index.js">
    <div style={{ display: 'flex', width: '100%', height: '100%' }}>
      <FileExplorer style={{ width: 300 }} />
      <CodeMirror style={{ flex: 1 }} />
      <BrowserPreview style={{ flex: 1 }} />
    </div>
  </SandpackProvider>
);

render(<App />, document.getElementById('root'));

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>
  {sandpack => {
    // Your logic!

    return <div>Hello</div>;
  }}
</SandpackConsumer>

The Sandpack context consists of these properties:

{
  browserFrame: HTMLIFrameElement | null;
  managerStatus: ManagerStatus;
  managerState: IManagerState | undefined;
  bundlerURL: string | undefined;
  openedPath: string;
  errors: Array<IModuleError>;
  files: IFiles;
  openFile: (path: string) => void;
  updateFiles: (files: IFiles) => void;
  getManagerTranspilerContext: () => Promise<{ [transpiler: string]: Object }>;
}
You can’t perform that action at this time.