How I build Streamlit Components (a small Javascript / React tutorial)
Do you want to take your Streamlit apps to the next stage by integrating your own web components?
In this tutorial, I will show you how I add interactive Javascript libraries into Streamlit as a Streamlit Component. I will then use a library called Parcel, with node.js to manage and bundle multiple Javascript libraries into a single JS file that can be manipulated as a Streamlit Component. After this introduction, I clone the React Component template and give some tips I learned from building 3 popular Components (streamlit-echarts, streamlit-drawable-canvas and streamlit-lottie) to build a React version of our Clickable Plotly Chart.
This is a tutorial for beginners and advanced developers alike. No HTML/CSS/JS prerequisites are required, though it will be much easier if you have a general idea of how to employ them. I suggest you watch the full tutorial once before actually attempting to implement it by yourself. After this tutorial, you should be able to embed almost any NPM package as a bidirectional Streamlit Component - especially if it takes JSON as input!
00:00 Integrate any NPM package into Streamlit?
00:26 Vanilla Javascript
06:18 Managing and Bundling Javascript libraries
12:03 Using the React Component Template
15:45 Build Components to help Data Scientists!
16:29 Outro
---
🗣️ Stay up to date with the Data Web App Ecosystem
📑 Follow my socials ➡ https://andfanilo.com
📧 Get my latest updates in your inbox ➡ https://newsletter.andfanilo.com
💰 Buy me a coffee to stay awake while editing ➡ https://www.buymeacoffee.com/andfanilo
🔗 Links
Code: https://github.com/andfanilo/streamli...
Blackary’s original tutorial with the streamlit-component-lib.js file: https://blog.streamlit.io/how-to-buil...
The official React template: https://github.com/streamlit/componen...
My Twitter thread for more Streamlit Components Resources: / 1552233660207828993
My long blog post about creating Streamlit Components: https://streamlit-components-tutorial...
Installing Node.js/NPM: https://docs.npmjs.com/downloading-an...
🔧 My tools (Affiliate links to support me)
📕 Streamlit Official Book - https://amzn.to/3QuRPwl
📷 Main Camera - https://amzn.to/3QvTosB
📷 Main Lens - https://amzn.to/3svYCwq
🎙️ Microphone - https://amzn.to/47l5ewA
🎵 Music & Sound Effects - https://www.epidemicsound.com/referra...
---
🪶 29th video, out of the 35 videos for 2022 goal. Longest video tutorial of the year (not counting the Epic Tutorial that I split in 2). I crunched 3 years of developing Streamlit Components in 17 minutes. Honestly the video is jam-packed with information, I hope you’ll have to rewatch it multiple times 😄 I need to do shorter videos now to catch up on the lost time..
⚠️ Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. Thank you for supporting my channel so I can continue providing you with free content!
#streamlit #python #datascience #dataapps
On this page of the site you can watch the video online How I build Streamlit Components (a small Javascript / React tutorial) with a duration of hours minute second in good quality, which was uploaded by the user Fanilo Andrianasolo 05 October 2022, share the link with friends and acquaintances, this video has already been watched 22,597 times on youtube and it was liked by 468 viewers. Enjoy your viewing!
