Installation
npm install use-flags-state
Usage
Manage multiple boolean flags in a single state object, with individual and batch updates, and optional reset to initial values.
Default behavior (reset=true)
By default, when you update flags with setFlags(), all flags not specified in the update are reset to their initial
values. This is useful when you want to ensure a clean state for each
operation.
Notice how clicking any button resets other flags to their initial values (false).
Preserve state behavior (reset=false)
When you set reset=false, only the flags you specify are updated, while all other flags
maintain their current values. This is perfect for complex UIs where you
need to preserve existing state.
Notice how flags preserve their values when other flags are updated. Try enabling dark mode first, then other actions.
Individual flag updates with setFlag
The setFlag function allows you to update individual flags without affecting others.
This is particularly useful when passing toggle functions as props to child
components, such as modals, dropdowns, or any component that needs to control
its own visibility state.
setFlag returns a function that behaves like React's
setState, accepting either a boolean value or an updater function.
- • Individual updates: Only the specified flag changes, others remain untouched
- • Component props: Perfect for passing toggle functions to child components
- • Flexible API: Accepts both direct values and updater functions
- • Type safety: Full TypeScript support with autocomplete for flag names