/anywidget_react_demo

Primary LanguageCSS

anywidget_react_demo

Showcase how to incorporate React component in a jupyter notebook.

I have been exploring AnyWidget and saw some people asked how to use React Component with it. I hope this demo could be helpful.

How to run it

  • Install:

    Install all the necessary node modules by running the npm install command.

    Only need to do this step once.

  • Convert to ESM:

    To convert your react components into ESM files and store them in the bundle folder, you can run npm run build (which actually runs ./node_modules/.bin/esbuild ./src/widget.tsx --format=esm --outdir=./bundle --bundle) .

    Or, npm run dev if you want to use the Hot Module Replacement (HMR) in anywidget[dev].

  • Usage

    import pathlib
import anywidget

class myWidget(anywidget.AnyWidget):
    _esm = pathlib.Path("../bundle/widget.js")
    _css = pathlib.Path("../bundle/widget.css")

m = myWidget()
image image