🖥️ Console Component

This component displays a Jupyter Console.

With a Jupyter server

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

  return (
    <JupyterReactTheme>
      {defaultKernel && <Console kernel={defaultKernel} />}
    </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

Your server will likely need to accept connection 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 ConsoleLiteExample() {
  const { defaultKernel } = useJupyter({
    lite: true,
    startDefaultKernel: true,
  });

  return (
    <JupyterReactTheme>
      {defaultKernel && <Console kernel={defaultKernel} />}
    </JupyterReactTheme>
  );
}

But you can also load your own JupyterLite kernel. For example here, the console loads the JavaScript kernel.

function ConsoleJavaScriptExample() {
  const { defaultKernel } = useJupyter({
    lite: import('@jupyterlite/javascript-kernel-extension'),
    defaultKernelName: 'javascript',
    startDefaultKernel: true,
  });

  return (
    <JupyterReactTheme>
      {defaultKernel && <Console kernel={defaultKernel} />}
    </JupyterReactTheme>
  );
}

To do so, you will need to specify two props:

• lite: Should be set with the dynamic import of the kernel NPM package
• defaultKernelName: Should match the name of the dynamically imported kernel