react-jupyter-notebook v0.4.0

react-jupyter-notebook

A simple React component that renders .ipynb files just like how they are rendered by JupyterLab.

Demo: https://joeyonng.github.io/react-jupyter-notebook/

Why

I created this component because I want to embed a pure frontend jupyter notebooks (ipynb files) viewer into my personal website, which is built using React.

This project was inspired by React-Jupyter-Viewer. I still reinvented the wheel since I prefer the original looking of JupyterLab.

Install

npm install --save react-jupyter-notebook

Features

• Nearly identical looking to original JupyterLab interface.
• Can render codes, images, outputs, markdown(equations) and HTML in the notebook.
• Enable resizing the height of the scrolled output.
• Can change the alignment of the media outputs.
• Customisable code block styling.

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import JupyterViewer from "react-jupyter-notebook";
import nb_test from "./nb_test.json"; // You need to read the .ipynb file into a JSON Object.

ReactDOM.render(
  <React.StrictMode>
    <JupyterViewer rawIpynb={nb_test}/>
  </React.StrictMode>,
  document.getElementById('root')
);

Props

Customising code block styles (codeBlockStyles prop)

I use React Syntax Highlighter for the syntax highlighting. One little problem with React Syntax Highlighter is that the whole line number container cannot be separately styled. The line number part in the original JupyterLab theme has a different background color with the codes part, so they need to be separately styled. My solution is to use two <SyntaxHighlighter/> components: one displays line numbers, and the other displays codes themselves.

You can use codeBlockStyles prop to pass the props to the SyntaxHighlighter to customize your own code block styles. Please read the docs of React Syntax Highlighter if you want to use this prop.