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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTc0ODQ5MzksIm5iZiI6MTcxNzQ4NDYzOSwicGF0aCI6Ii8xOTc3NDE5OC8yNTAxMTY3NDAtNmNlM2ViNjEtZDgxOC00MWE0LWE4NmQtY2FiZTRjYzZlYTMyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MDQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjA0VDA3MDM1OVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTljYjFjMDkwNDkzZmFkOGIyODRkZjE5Y2U3NDNlYzdhYmI2ODcxOGE2N2NmMDFjYmM3ZGRhZWUzMTM3NTliMTEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.942jLD8q6qVmw3yg71aDdmdsx3j6ynR3JWUPsE6ixVc)
![image](https://private-user-images.githubusercontent.com/19774198/249911862-262b68ad-0683-4308-878c-b41e22635a89.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTc0ODQ5MzksIm5iZiI6MTcxNzQ4NDYzOSwicGF0aCI6Ii8xOTc3NDE5OC8yNDk5MTE4NjItMjYyYjY4YWQtMDY4My00MzA4LTg3OGMtYjQxZTIyNjM1YTg5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MDQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjA0VDA3MDM1OVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTJhM2Q4NTBmOTk0ODBhNzAyYzY1M2VhODIxZGM4MmIzNTczZDMzMWNlNjFhODE5ODg4M2Q3MWExNGY2YjI0MWUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.8eW73eQUqy047YRzDCr0jxEY0UIMtrgiW4k_p2EIyf8)