Using with state management

Hello, 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.

[dbismut]

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.

const [values, set] = useControls(() => inputs)

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!

[dbismut]

I’m not sure I understand why anyone would use the set function inside onChange. This is redundant. If you need reactivity with onChange, you can set the transient option to false (this option might be renamed to reactive in the future).