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

Prop name	Type	Description	(default) Values
rawIpynb	Object	The JSON object converted from the .ipynb file.
language	String	The programming language used in the notebook.	"python", others
showLineNumbers	Boolean	Show or hide the line numbers.	true, false
mediaAlign	String	How to align medias (images, HTML).	"center", "left", "right"
displaySource	String	How source cells are displayed.	"auto", "hide", "show"
displayOutput	String	How output cells are displayed.	"auto", "hide", "show", "scroll"
codeBlockStyles	Object	Customize code cells styles. Use JupyterLab theme if undefined.	undefined, {...}

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.

Property Name	Type	Description	Which `<SyntaxHighlighter/>`
hljsStyle	String	Name of the highlight.js style object. See here.	Both line number and code.
lineNumberStyle	Object	Style object for every line numbers object.	Line number.
lineNumberContainerStyle	Object	Style object for the container of line numbers.	Line number.
codeContainerStyle	Object	Style object for the container of the codes.	Code.