-
-
Notifications
You must be signed in to change notification settings - Fork 328
how to implement a progress bar that renders multiple times when a function is running? #1194
-
I am trying to understand the basics of progress bar in reactpy. I want the progress bar to update itself multiple times when a button is clicked. I try to implement a dummy example using bootstrap progress bar. The basic idea is that if the "Count" button is clicked, it will run a function that yields a number (0,20,40,60,80,100) every second. I want the progress bar to update for every second. But obviously, my approach is wrong, as the event handler function will only render once after it runs all the codes. How to implement this correctly? Thanks.
Beta Was this translation helpful? Give feedback.
All reactions
There are two common approaches you can take to update a status bar
- Store the value in a something like
redisormysqland have your component poll for it viause_effect
@component def progress_bar_app(): percentage, set_percentage = hooks.use_state(0) @hooks.use_effect async def update_percentage(): while True: await sleep(1) # Retrieve the current percentage from something like a database or redis. current = await get_percentage() set_percentage(current) return ...
- Have the percentage be a component
prop(get the actual value from a parent component).
This is useful if you have a parent component that is a...
Replies: 1 comment
-
There are two common approaches you can take to update a status bar
- Store the value in a something like
redisormysqland have your component poll for it viause_effect
@component def progress_bar_app(): percentage, set_percentage = hooks.use_state(0) @hooks.use_effect async def update_percentage(): while True: await sleep(1) # Retrieve the current percentage from something like a database or redis. current = await get_percentage() set_percentage(current) return ...
- Have the percentage be a component
prop(get the actual value from a parent component).
This is useful if you have a parent component that is actually performing the "progression actions".
@component def progress_bar_app(percentage): return ... @component def parent(): return html.div( progress_bar_app(percentage=100), )
Beta Was this translation helpful? Give feedback.