react-sandpack-for-storybook
React components that help you create a full fledged online web application editor. Powered by Sandpack, the online bundler used by CodeSandbox.
Last updated 6 months ago by libetl .
GPL-3.0 · Repository · Original npm · Tarball · package.json
$ cnpm install react-sandpack-for-storybook 
SYNC missed versions from official npm registry.

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 }>;
}

Current Tags

  • 0.0.1                                ...           latest (6 months ago)

1 Versions

  • 0.0.1                                ...           6 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (11)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |