If you are using thebe-react
you can add thebe-lite
into your app and enable it at runtime via the useJupyterLite
option. It's worth noting thebe-lite
is always directly loaded onto your page via a script tag and accessed globally, while we prefer to load thebe-core
lazily by the same method. This is for considerations such as package size, build system compatibility and for uniformity while playing nicely with serverside rendering frameworks like Remix.
Aync loadingΒΆ
To load thebe-core
the package use the ThebeBundleLoaderProvider
component:
<ThebeBundleLoaderProvider loadThebeLite publicPath="/thebe">
<ThebeServerProvider> ... </ThebeServerProvider>
</ThebeBundleLoaderProvider>
This makes the core
API availalbe to the child component tree via the useThebeLoader
hook, to load thebe-lite
add the loadThebeLite
boolean prop.
This will load the appropriate javascript directly to the page either on render (if a start
prop is passed) or when the load
function from the useThebeLoader
hook is called from a child component.