📓 Notebook Component

With a Jupyter server

function NotebookExample() {
  const { serviceManager } = useJupyter({
    jupyterServerUrl: "https://oss.datalayer.run/api/jupyter-server",
    jupyterServerToken: "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
  });

  return (
    <JupyterReactTheme>
      {serviceManager && <Notebook serviceManager={serviceManager} />}
    </JupyterReactTheme>
  );
}

You can set the following props in useJupyter hook to connect it to a running Jupyter Server:

• jupyterServerUrl: The server URL
• jupyterServerToken: The server authentication token

note

Your server will likely to accept connections from external client.

With in-browser kernel

It supports in-browser kernel (using JupyterLite kernels).

To use the Pyodide Python kernel, you can simply set lite to true:

function NotebookLiteExample() {
  const { defaultKernel } = useJupyter({
    lite: true,
    startDefaultKernel: true,
  });

  return (
    <JupyterReactTheme>
      {defaultKernel && (
        <Notebook
          kernel={defaultKernel}
          ipywidgets={'classic'}
          nbformat={{
            cells: [
              {
                cell_type: 'code',
                outputs: [],
                source:
                  "import micropip\nawait micropip.install('ipywidgets')",
              },
              {
                cell_type: 'code',
                outputs: [],
                source: 'import ipywidgets as widgets\nw = widgets.IntSlider()\nw',
              }
            ],
            metadata: {
              kernelspec: {
                display_name: 'Python 3 (ipykernel)',
                language: 'python',
                name: 'python3',
              },
            },
            nbformat: 4,
            nbformat_minor: 5,
          }}
        />
      )}
    </JupyterReactTheme>
  );
}

## More Examples

The below picture is an example of Notebook into a React.js component.

<ModalImage
  small="https://jupyter-examples.datalayer.tech/jupyter-react-notebook.png"
  large="https://jupyter-examples.datalayer.tech/jupyter-react-notebook.png"
  alt="Jupyter UI Notebook"
/>

In this first example, the Jupyter Server will be fetched for the `test.ipynb` notebook `ipynb` file content.

```jsx
function NotebookCollaborativeExample() {
  const { serviceManager } = useJupyter({
    terminals: true,
    collaborative: true,
  });

  return (
    <JupyterReactTheme>
      {serviceManager && (
        <Notebook serviceManager={serviceManager} path="test.ipynb" />
      )}
    </JupyterReactTheme>
  );
}

Alternatively, you can get a notebook "ipynb" content from any JSON file compatible with the `INotebookContent` interface.

```jsx
import { INotebookContent } from '@jupyterlab/nbformat';
import nbformat from "./NotebookExample.ipynb.json";

function NotebookNbformatExample() {
  const { serviceManager } = useJupyter({
    terminals: true,
    collaborative: true,
  });

  return (
    <JupyterReactTheme>
      {serviceManager && (
        <Notebook
          serviceManager={serviceManager}
          nbformat={nbformat as INotebookContent}
        />
      )}
    </JupyterReactTheme>
  );
}

The available properties for the Notebook component are listed on the [TypeDoc page](https://typedoc.datalayer.tech/datalayer/jupyter-react/0.9.0/types/INotebookProps.html).