A new library and template using React Hooks for creating Streamlit Components

Custom Components streamlit-webrtc
1

Hi community,

I created a thin wrapper of streamlit-component-lib for React Hooks and function-based components, and also set up a component template using it.

I like hooks and function-based components rather than class-based ones and think some of you are the same.
I hope these are helpful, and welcome any feedback :slight_smile:

5 Likes
2

This is very nice, I much prefer function based also and being time poor I’m usually not following best practises when making components, really appreciate this template, maybe I’ll make some better components now, thanks!

1 Like
3

Nice :slight_smile: thanks for creating this @whitphx

There is a « components template » section in the [tracker]{Streamlit Components - Community Tracker) , you can add your template there so we can keep track of it

I also think you can make a MR on the component template readme in the community template section

Have a nice day,
Fanilo

4

@andfanilo Thank you, I did both :smiley:

1 Like
5

This is great Yuichiro!

I’ve also shared your new library on our Creators’ channel :slight_smile:

Charly

1 Like
6

I agree, and I did the same in my Auth0 authentication component using Next.js. It’s nice to have a semi-official template though that promotes this. Thanks, @whitphx!!

1 Like
7

I rewrote my streamlit-webrtc component to use the hooks- and functions-based style with this library: Fix to use hooks by whitphx · Pull Request #424 · whitphx/streamlit-webrtc · GitHub :v:

1 Like
8

I’m really interested in using the use-places-autocomplete react hook in my streamlit web app to do places autocomplete using google maps. So I’m really curious to know if your library can be the thing that makes this happen.
Btw I’m not familiar with any react or JS, all I know is Python and streamlit for the web app.