react-notebook
React components for Jupyter Notebook
Last updated 4 years ago by piaoyuankui .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-notebook 
SYNC missed versions from official npm registry.

react-notebook

Build Status

Overview

:notebook: 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

Current Tags

  • 0.1.0                                ...           latest (4 years ago)

18 Versions

  • 0.1.0                                ...           4 years ago
  • 0.0.19                                ...           4 years ago
  • 0.0.18                                ...           4 years ago
  • 0.0.17                                ...           4 years ago
  • 0.0.16                                ...           4 years ago
  • 0.0.15                                ...           4 years ago
  • 0.0.14                                ...           4 years ago
  • 0.0.13                                ...           4 years ago
  • 0.0.12                                ...           4 years ago
  • 0.0.10                                ...           4 years ago
  • 0.0.9                                ...           4 years ago
  • 0.0.8                                ...           4 years ago
  • 0.0.7                                ...           4 years ago
  • 0.0.6                                ...           4 years ago
  • 0.0.4                                ...           4 years ago
  • 0.0.3                                ...           4 years ago
  • 0.0.2                                ...           4 years ago
  • 0.0.1                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (15)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |