[WIP] ⚛️ JupyterLab React Widgets

This is a Work In Progress - You can try and contribute to make it usable...

This repository curates existing techniques to create React based widgets for JupyterLab.

# Clone, install and browse the Storybook.
git clone https://github.com/datalayer/jupyterlab-react-widgets.git &&
  cd jupyterlab-react-widgets && \
  yarn install && \
  yarn storybook

Why this repository? We want to ensure React remains a JupyterLab first-class citizen.

JupyterLab UI is built on the Lumino widgets. React components are available today in the UI Components package and embedded in Lumino widgets via the WidgetReact helper class. However, the goal seems to remove React from the JupyterLab core source code. This is still under discussion, see e.g.:

• Remove dependency on third-party library for ui-components
• Future of ui-components package: drop Blueprint; should we use Material-UI?
• Switch to material-ui

Other systems part of the Jupyter ecosystem should be considered while integrating React in JupyterLab:

• IpyWidgets (Jupyter Widgets, Interactive Widgets for the Jupyter Notebook) integrates with JupyterLab via the IpyWidgets Jupyterlab Manager extension.
• Nteract which is developed from scratch with React. Ntreact supports IpyWidgets via its jupyter-widgets package.

Technical Implementations

@lumino/virtualdom

Lumino Virtual DOM package.

Adds a "pass thru" virtual element

@nteract/transform-vdom

Nteract Transform VDOM package.

WidgetReact and UseSignal

WidgetReact allows to embed a React component into a Lumino Widget. The following details an example for the toolbar button:

• ToolbarButtonComponent is a React component for a button. It knows nothing about Lumino widgets nor signals.
• ToolbarButton is a Lumino widget that wraps the previous ToolbarButtonComponent with ReactWidget and takes the exact same props.
• UseSignal component manages the transition between Lumino signals and React props.

Another example is the HDF Toolbar.

@nteract/jupyter-widgets

Ntreact supports IpyWidgets via its Jupyter Widgets package.

ReactWidget and UseProps

TBD

IpyWidgets

@jupyter-widgets/jupyterlab-manager

IpyWidgets are Jupyter Widgets, Interactive Widgets for the Jupyter Notebook.

You need a python library for this.

pip install ipywidgets

They integrate with JupyterLab via the IpyWidgets Jupyterlab Manager extension.

jupyter labextension install @jupyter-widgets/jupyterlab-manager

To display a React component in the IpyWidget output, see for example IpyResuse Widget: ReactDOM.render(...) your component on this.el, the DOM node you have control over. It's the root node of the widget.

IpyMaterialUI is Jupyter Widgets based on React Material UI components. You can access your children's props, which are immutable, but the underlying IpyWidget model can change.

@jupyterlab/vdom

JupyterLab VDOM and VDOM Extension packages which use the previously described @nteract/transform-vdom package.

Add event handling support to vdom-extension

Needs:

• Nteract Python VDOM is Virtual DOM for Python.

Read Also

• How do you engineer a JupyterLab React Component?

• Track migration to components.

• [WIP] Add @jupyterlab/components package.

• Figure out if tree shaking is working with blueprint.

• Create a @jupyterlab/ui package based on Blueprint and possibly Material UI.

• Add ui package and refactor toolbars.

• How do you engineer a JupyterLab React Component?

• Switch to material-ui.

• Remove dependency on third-party library for components.

• [OUTDATED] jupyter-react.

• [OUTDATED] VDom IpyWidget.

• [OUTDATED] VDom Ipywidget Repo.

• [OUTDATED] WDom Demo.