Join us to discuss the challenges, solutions and best practices for in-house JavaScript code sharing. Tuesday, 12/17 at 10am PT/1pm ET.Sign up here »

react-notebook

0.1.0 • Public • Published

react-notebook

Build Status

Overview

📓 It's an React-based interactive notebook. mostly inspried by nteract

Scope and goals

  • Enable html rendering from ipynb file
  • Standalone cross-platform from desktop to web application.
  • Store-Dispatch pattern with support multiple UI components.

Usage

Install the package via npm

npm install --save react-notebook

Render Jupyter notebook outputs in a trim little React component.

import Notebook from 'react-notebook';
 
const notebook = require('PATH_TO_NOTEBOOK.ipynb');
 
const html = <Notebook contents={notebook} />;

or you can attach enchannel and store, dispatch to make it interactable.

import * as enchannelBackend from 'enchannel-notebook-backend';
import { Notebook, createStore } from 'react-notebook'
 
// Prompt the user for the baseUrl and wsUrl
const baseUrl = 'http://localhost:8888';
const domain = baseUrl.split('://').slice(1).join('://');
const wsUrl = `ws://${domain}`;
 
// Create a connection options object
const connectionOptions = {
  baseUrl,
  wsUrl,
};
 
const { store, dispatch } = createStore({
  filename: 'test',
  executionState: 'not connected',
  notebook: null,
});
 
const notebook = require('PATH_TO_NOTEBOOK.ipynb');
 
enchannelBackend.spawn(connectionOptions, 'python3').then(id => {
  console.info('spawned', id); // eslint-disable-line
  return id;
}).catch(err => {
  console.error('could not spawn', err); // eslint-disable-line
  throw err;
}).then(id => {
  return Promise.all([id, enchannelBackend.connect(connectionOptions, id)]);
}).catch(err => {
  console.error('could not connect', err); // eslint-disable-line
  throw err;
}).then(args => {
  const id = args[0];
  const channels = args[1];
  console.info('connected', id, channels); // eslint-disable-line
 
  const html = <Notebook
                  store={store}
                  dispatch={dispatch}
                  channels={channels}
                  contents={notebook}
                />;
});

Development

Python runtime

we need the jupyter-notebook installed:

pip install notebook

Install

Requires node 5.x, npm 3.

  1. Fork this repo
  2. Clone it git clone https://github.com/kerwin/react-notebook
  3. cd to where you cloned it
  4. npm install
  5. npm start

Install

npm i react-notebook

DownloadsWeekly Downloads

65

Version

0.1.0

License

ISC

Last publish

Collaborators

  • avatar