Many JupyterLab APIs require Lumino Widgets which have some additional features over native DOM elements, including:
- Resize events that propagate down the Widget hierarchy.
- Lifecycle events (
- Both CSS-based and absolutely positioned layouts.
We support wrapping React components to turn them into Lumino
widgets using the
ReactWidget class from
Here we use the
create static method to transform a React element
into a Lumino widget. Whenever the widget is mounted, the React
element will be rendered on the page.
If you need to handle other life cycle events on the Lumino widget
or add other methods to it, you can subbclass
render method to return a React element:
We use Lumino Signals to represent
data that changes over time in JupyterLab.
To have your React element change in response to a signal event, use the
UseSignal component from
which implements the “render props”:
We currently do not have a way of embedding Lumino widgets inside of React components. If you find yourself trying to do this, we would recommend either converting the Lumino widget to a React component or using a Lumino widget for the outer layer component.
We follow the React documentation and “React & Redux in TypeScript - Static Typing Guide” for best practices on using React in TypeScript.