Use Counter - Mantine

import { UseCounterDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.useCounter);

Usage

Definition

tsx

interface UseCounterOptions {
  min?: number;
  max?: number;
  step?: number;
}

interface UseCounterHandlers {
  increment: () => void;
  decrement: () => void;
  set: (value: number) => void;
  reset: () => void;
}

type UseCounterReturnValue = [number, UseCounterHandlers];

function useCounter(
  initialValue?: number,
  options?: UseCounterOptions,
): UseCounterReturnValue

Exported types

The UseCounterOptions, UseCounterHandlers, and UseCounterReturnValue types are exported from the @mantine/hooks package; you can import them in your application:

tsx

import type { UseCounterOptions, UseCounterHandlers, UseCounterReturnValue } from '@mantine/hooks';