useCounter

Manage a counter with increment/decrement functions.

Features

Reset the counter to the initial value.
Set the minimum and maximum values of the counter.
Set the counter to a given value.
Execute a function when the counter reaches the minimum or maximum value.

Installation

npm i @raddix/use-counter

Usage

Counter basic

To begin, we will create a counter with the possibility of incrementing and decrementing it by 1, and resetting it to the initial value.

import { useCounter } from '@raddix/use-counter';

const Counter = () => {
  const [counter, { inc, dec, reset }] = useCounter(0);

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={() => inc()}>Increment</button>
      <button onClick={() => dec()}>Decrement</button>
      <button onClick={() => reset()}>Reset</button>
    </div>
  );
};

Add minimum and maximum values

Now, we will add a minimum and maximum value to the counter, and execute a function when the counter reaches the minimum or maximum value.

import { useCounter } from '@raddix/use-counter';

const Counter = () => {
  const [counter, { inc, dec, reset }] = useCounter(0, {
    min: 0,
    max: 10,
    onMin: () => console.log('Counter reached the minimum value'),
    onMax: () => console.log('Counter reached the maximum value')
  });

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={() => inc()}>Increment</button>
      <button onClick={() => dec()}>Decrement</button>
      <button onClick={() => reset()}>Reset</button>
    </div>
  );
};

API

Return value

The useCounter hook returns an array with the following elements:

Index	Description	Type
0 (counter)	The current counter value.	number
1 (actions)	An object containing the actions to manage the counter.	object

Actions

Name	Description	Type
inc	Increments the counter, default by 1.	(value?: number) => void
dec	Decrements the counter, default by 1.	(value?: number) => void
reset	Resets the counter value to the initial value.	() => void
set	Sets the counter value to the given value.	(value: number) => void

Parameters

The useCounter hook accepts the following parameters:

Name	Description	Type
initialValue	The initial value of the counter.	number
options	An object containing the options to manage the counter.	object

Options

Name	Description	Type
min	The minimum value of the counter.	number
max	The maximum value of the counter.	number
onMin	Function to execute when the counter reaches the minimum value	() => void
onMax	Function to execute when the counter reaches the maximum value	() => void