react-smooshpack
React components that help you create a full fledged online web application editor. Powered by Sandpack, the online bundler used by CodeSandbox.
Last updated 5 months ago by compuives .
SEE LICENSE.MD IN ROOT · Repository · Original npm · Tarball · package.json
$ cnpm install react-smooshpack 
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.56                                ...           latest (5 months ago)

45 Versions

  • 0.0.56                                ...           5 months ago
  • 0.0.55                                ...           5 months ago
  • 0.0.54                                ...           6 months ago
  • 0.0.53                                ...           8 months ago
  • 0.0.49                                ...           a year ago
  • 0.0.44                                ...           a year ago
  • 0.0.43                                ...           a year ago
  • 0.0.42                                ...           a year ago
  • 0.0.41                                ...           a year ago
  • 0.0.40                                ...           a year ago
  • 0.0.39                                ...           a year ago
  • 0.0.38                                ...           a year ago
  • 0.0.37                                ...           a year ago
  • 0.0.36                                ...           a year ago
  • 0.0.35                                ...           a year ago
  • 0.0.34                                ...           a year ago
  • 0.0.33                                ...           a year ago
  • 0.0.32                                ...           a year ago
  • 0.0.31                                ...           a year ago
  • 0.0.30                                ...           a year ago
  • 0.0.29                                ...           a year ago
  • 0.0.28                                ...           a year ago
  • 0.0.27                                ...           a year ago
  • 0.0.26                                ...           a year ago
  • 0.0.25                                ...           a year ago
  • 0.0.24                                ...           a year ago
  • 0.0.23                                ...           a year ago
  • 0.0.21                                ...           a year ago
  • 0.0.19                                ...           a year ago
  • 0.0.18                                ...           a year ago
  • 0.0.17                                ...           a year ago
  • 0.0.16                                ...           a year ago
  • 0.0.15                                ...           a year ago
  • 0.0.14                                ...           a year ago
  • 0.0.13                                ...           a year ago
  • 0.0.12                                ...           a year ago
  • 0.0.10                                ...           a year ago
  • 0.0.9                                ...           a year ago
  • 0.0.8                                ...           a year ago
  • 0.0.7                                ...           a year ago
  • 0.0.6                                ...           a year ago
  • 0.0.5                                ...           a year ago
  • 0.0.4                                ...           a year ago
  • 0.0.3                                ...           a year ago
  • 0.0.2                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 8
Last Day 0
Last Week 0
Last Month 47
Dependencies (11)
Dev Dependencies (48)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |