Vast is a simple state utility created to use in Vest. It allows using a similar pattern to React's useState hook to store data.
Note that this is mostly intended to be used within libraries, and not as a consumer facing interface. When paired with a context propagation libraries such as context, it can have pretty powerful capabilities. See Vest for a real life example.
npm i vast
import { createState } from 'vast';
const state = createState(); // Creates a state reference.
const useColor = state.registerStateKey('blue'); // Creates a new key in the state, and gives it an initial value
// You can also pass in a function to use as the initial state
const [color, setColor] = useColor(); // ["blue", Function]
setColor('red'); // set the color to "red"
The next time you will call useColor
the value of color
will be "red"
.
You can also set a computed value by passing in a function:
const [color, setColor] = useColor(); // ["blue", Function]
setColor(currentColor => (color === 'red' ? 'blue' : 'red'));
NOTE This will not let you know what change was made, but only that a key in the state was updated or added:
Simply add an onChange callback to your createState:
const state = createState(() => console.log('the state was updated!'));
Now on every state change, this callback will run.
Alternatively, if you need more granularity, you can subscribe to specific state keys.
If you need to react to specific changes in your state, you can add an onUpdate
callback to those state key registrations:
const useColor = state.registerStateKey(
'red',
(currentState, previousState) => {
console.log(`the color changed from ${previousState} to ${currentState}!`);
}
);
Now, whenever a state update happens in that key, your callback will run, providing the previous and changed value as well.