Guide
Reference
Roadmap
Guide
Reference
Roadmap

useCounter

Tags:
State

A React hook that provides a counter with increment, decrement, and reset functionalities.

Scenes

  • Number computation scenes: Offers functionalities to increment, decrement, set, get, and reset the counter
  • UI interaction scenes: Implements the dynamic update and display of quantities on the user interface, such as the number of products in a shopping cart, carousel switching
  • Limiting value range scenes: Applies maximum and minimum value restrictions to the number (it is recommended to use the more semantically clear useClamp)
  • ...

Demo

Source
Count:
1
Min:
0
Max:
20
Initial:
1

Usage

const [count, actions] = useCounter(20) const [count, actions, couterState] = useCounter(20, { min: 1, max: 100 }) // Increment the counter actions.inc() actions.inc(2) // Decrement the counter actions.dec() actions.dec(4) // Set the counter to a specific value actions.set(10) // Reset the counter to the initial value (or reset the initial value as well) actions.reset() actions.reset(12) // Get the value of the counter, the value is count acitons.get()

Source

Click links below to view source on GitHub.

🪝 Hook🎨 Demo📄 Document

API

const [count, actions, couterState] = useCounter(initialCount, options)

InitialCount

A number type of initial value.

Options

export type UseCounterOptions = { /** * The maximum value of the counter */ max?: number /** * The minimum value of the counter */ min?: number }

Returns

export interface UseCounterReturnsAction { /** * Increment the counter */ inc: (delta?: number) => void /** * Decrement the counter */ dec: (delta?: number) => void /** * Set the counter */ set: (value: number) => void /** * Get the counter */ get(): number /** * Reset the counter */ reset: (n?: number) => void /** * Set the counter, use React's `setState` style, supports function updater to avoid expired value * * @since 1.9.0 */ setState: (state: SetStateAction<number>) => void } export interface UseCounterState { /** * The value of the counter */ count: number /** * The maximum value of the counter */ max: number /** * The minimum value of the counter */ min: number /** * The initial value of the counter */ initialCount: number } export type UseCounterReturns = readonly [ /** * The count state of the counter */ number, /** * Functions to control the counter */ UseCounterReturnsAction, /** * The full internal state of the counter */ UseCounterState, ]