Search the Community
Showing results for tags 'zustand'.
Found 1 result
-
Hello, I'm not a pro, so forgive my vocabulary if it's not accurate... I am trying to find out how I could use GSAP to animate the value of a state managed by Zustand (React state management). Here is how basic Zustand works: Creating the store: const useStore = create((set) => ({ bears: 0, increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), removeAllBears: () => set({ bears: 0 }), })) Binding components: function BearCounter() { const bears = useStore((state) => state.bears) return <h1>{bears} around here...</h1> } function Controls() { const increasePopulation = useStore((state) => state.increasePopulation) return <button onClick={increasePopulation}>one up</button> } Let say I want to tween the value of the state bears from 0 to 100. I would like to understand how to do it using 2 different approaches: how would you do it using a method within the store? how would you do it using a function within the component? Or are those approaches wrong? Thank you!
