@react-hook/counter NPM

A React hook counter with min/max/step/cast options

Quick Start

import useCounter from '@react-hook/counter'

const Component = () => {
  const counter = useCounter(5 /*initialValue*/, {
    min: 0,
    max: 10,
    // Sets the value to the maximum value when
    // the min value threshold has been crossed
    onMin: (set) => set(10),
    // Sets the value to the minimum value when
    // the max value threshold has been crossed
    onMax: (set) => set(0),
  })

  return (
    <div>
      <div>Value: {counter.value}</div>
      <div>
        <button onClick={() => counter.decr()}>-</button>
        {' / '}
        <button onClick={() => counter.incr()}>+</button>
      </div>
    </div>
  )
}

API

useCounter(initialValue, options)

Argument	Type	Default	Required?	Description
initialValue	`number`	`0`	Yes	The initial value of the counter
options	`UseCounterOptions`	See `UseCounterOptions`	No	Options for the counter

Returns `UseCounterState`

UseCounterOptions

Option	Type	Default	Description
min	`number`	`undefined`	The minimum counter value
max	`number`	`undefined`	The maximum counter value
step	`number`	`1`	The amount to increment/decrement the counter by, by default when `incr` or `decr` are called
cast	`(value: number) => number`	`Number`	Casts the number to a specific type, e.g. `parseFloat`, `parseInt`, etc.
onMin	`(set: (value: number) => void) => void`	`undefined`	Called when a user tries to set a value below the `min` value defined above. By default the value will just not change once the `min` is exceeded.
onMax	`(set: (value: number) => void) => void`	`undefined`	Called when a user tries to set a value above the `max` value defined above. By default the value will just not change once the `max` is exceeded.

UseCounterState

Option	Type	Description
value	`number`	The current value of the counter
set	`(value: number) => void`	Sets a new value to the counter
incr	`(by: number = step) => void`	Increments the value of the counter by `step` by default
decr	`(by: number = step) => void`	Decrements the value of the counter by `step` by default