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.
-
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 runnpm 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](https://private-user-images.githubusercontent.com/19774198/250116740-6ce3eb61-d818-41a4-a86d-cabe4cc6ea32.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk5MTY2MzMsIm5iZiI6MTcxOTkxNjMzMywicGF0aCI6Ii8xOTc3NDE5OC8yNTAxMTY3NDAtNmNlM2ViNjEtZDgxOC00MWE0LWE4NmQtY2FiZTRjYzZlYTMyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MDIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzAyVDEwMzIxM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTg2Njg5OTkzN2YzYTEyYzA2NzQ3NzU4YWE5MGJlYjBmMGJmNjY1ZTU0Y2NhOTI5YmM5MWNmNzM5NzgzNjdjYjQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.vxEiQnezPXJ_kZB2QhaYrgcCveAnDZkIQYyAvvbpeAg)
![image](https://private-user-images.githubusercontent.com/19774198/249911862-262b68ad-0683-4308-878c-b41e22635a89.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk5MTY2MzMsIm5iZiI6MTcxOTkxNjMzMywicGF0aCI6Ii8xOTc3NDE5OC8yNDk5MTE4NjItMjYyYjY4YWQtMDY4My00MzA4LTg3OGMtYjQxZTIyNjM1YTg5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MDIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzAyVDEwMzIxM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWZhNGIwMzY0NWMzZjJiZDI0Y2RiY2VkODkzYWJkZmFjYmRmZDg2NzUwZTU0NjZjNGE3Yjk2NzI1MTRiOGEwNGMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.nPkyaxNPcFXfWLxJAo85CaqU1Yqf63zDwm7t1MUpU3I)