useCounter

Hook that manages a counter

utilities

test coverage

Last changed: last month

Installation

Library

CLI

Manual

import { useCounter } from '@siberiacancode/reactuse';

Usage

const { count, dec, inc, reset, set } = useCounter(5);
// or
const { count, dec, inc, reset, set } = useCounter({ initialValue: 5, min: 0, max: 10 });

Demo

source

Api

Parameters

Name	Type	Default	Note
initialValue?	number	0	The initial number value
options.min?	number	Number.NEGATIVE_INFINITY	The min of count value
options.max?	number	Number.POSITIVE_INFINITY	The max of count value

Returns

UseCounterReturn

Parameters

Name	Type	Default	Note
params.initialValue?	number	0	The initial number value
params.min?	number	Number.NEGATIVE_INFINITY	The min of count value
params.max?	number	Number.POSITIVE_INFINITY	The max of count value

Returns

UseCounterReturn

Type declaration

import type { Dispatch, SetStateAction } from 'react';

export interface UseCounterOptions {
  /** The max of count value */
  max?: number;
  /** The min of count value */
  min?: number;
}

export interface UseCounterReturn {
  /** Function to set a specific value to the counter */
  set: Dispatch<SetStateAction<number>>;
  /** The current count value */
  value: number;
  /** Function to decrement the counter */
  dec: (value?: number) => void;
  /** Function to increment the counter */
  inc: (value?: number) => void;
  /** Function to reset the counter to its initial value. */
  reset: () => void;
}

export interface UseCounter {
  (initialValue?: number, options?: UseCounterOptions): UseCounterReturn;

  (options: UseCounterOptions & { initialValue?: number }, initialValue?: never): UseCounterReturn;
}

Source

Source • Demo

Contributors

D

debabin