Using with state management
See original GitHub issueHello, First, Leva looks really great. I was in the process of rolling my own type of solution before I saw a post on Reddit. Your approach is MUCH cleaner and smarter than my attempt so I’m very intrigued at getting Leva integrated into my app.
My question is about state management/sync, specifically with something like Redux/RTK. Since it seems the each controls state is relatively coupled, what would be the correct way to use values that come from the apps ‘global’ state somewhere, while having the changes get passed down correctly to Leva’s controls?
One approached I’ve tried is a useEffect
on the value I want to “watch” from a control and then just dispatch the updated value back to my store. Another is to use the new onChange
callback to do the same thing. But I’ll be honest, both of those don’t feel right…
I know I might be missing something obvious and any insight on how to approach this would be great.
Issue Analytics
- State:
- Created 2 years ago
- Comments:6 (2 by maintainers)
Top GitHub Comments
Hi! So binding with another state is not something that we’ve considered from the ground up, so you feeling wrong might be normal.
As you’ve noted, leva provides the
onChange
a callback that doesn’t trigger a render, so that means that you’d have to use your store values to make the component react to changes.leva also provides a
set
function (undocumented I believe) that is returned when using the function api.You could also use that function to react to your store changes and update leva accordingly.
If this doesn’t help or still feels wrong, please provide what you think would be a good api for your usecase and we’ll see what we can do!
I’m not sure I understand why anyone would use the
set
function insideonChange
. This is redundant. If you need reactivity withonChange
, you can set thetransient
option tofalse
(this option might be renamed toreactive
in the future).