useCounter

A number with increment, decrement, set and reset actions.

HooksState@gaudi/design-system/hooks/state/use-counterView in Storybook Source

Functional updates compose within one event. Reset returns to the current initialValue argument. The hook imposes no product-specific bounds.

Usage

import { useCounter } from '@gaudi/design-system/hooks';
const { count, increment, decrement, reset } = useCounter(1);

Examples

Playground

API

1 option

2 return values

Accessibility

Give increment and decrement buttons meaningful names; announce changes only when useful.

useBooleanGeneric boolean state with stable toggle, enable and disable actions.useControllableStateState that works controlled or uncontrolled, like native inputs.useCountdownA pausable countdown or count-up that stops at its target.useDebounceCallbackA debounced function with cancel and flush.useDebounceValueA value that updates only after it stops changing.useDisclosureOpen, close and toggle state for overlays and disclosures.