useCounter

Manage a counter state.

https://www.shaktools.com/shak-hooks

State

API Reference

Installation

terminal

pnpm add @shak-hooks/usehooks

import.ts

import { useCounter } from "@shak-hooks/usehooks";

Source: packages/react/src/useCounter.ts

Signature

signature.ts

export function useCounter(initialValue: number = 0, options: CounterOptions = {}): UseCounterReturn

Parameters

Name	Type	Optional	Default
initialValue	number	Yes	0
options	CounterOptions	Yes	{}

Returns

UseCounterReturn

Exported Types

types.ts

1export interface CounterActions {

2 inc: (delta?: number) => void;

3 dec: (delta?: number) => void;

4 get: () => number;

5 set: (value: number) => void;

6 reset: (value?: number) => void;

9export type UseCounterReturn = [

10 number,

11 CounterActions

12];

Implementation

use-counter.ts

1import { useState, useCallback } from "react";

3export function useCounter(initialValue: number = 0) {

4 const [count, setCount] = useState(initialValue);

6 const increment = useCallback(() => setCount((x) => x + 1), []);

7 const decrement = useCallback(() => setCount((x) => x - 1), []);

8 const reset = useCallback(() => setCount(initialValue), [initialValue]);

9 const set = useCallback((value: number) => setCount(value), []);

11 return { count, increment, decrement, reset, set };

12}

Google Ads

Usage

example.tsx

1import { useCounter } from "@shak-hooks/usehooks";

3const result = useCounter(undefined, undefined);

4// result: UseCounterReturn

5// Use values directly (React state).