useCounter

useCounter hook provides a simple way to manage a stateful counter.

Import

import { useCounter } from "@prismane/core/hooks";

Usage

function Demo() {
  const { counter, increment, decrement, set } = useCounter();

  return (
    <Flex direction="column" gap={fr(5)}>
      <Flex gap={fr(2)}>
        <Button onClick={() => increment()}>Increment</Button>
        <Button onClick={() => increment(5)}>Increment By Custom Step</Button>
        <Button onClick={() => decrement()}>Decrement</Button>
        <Button onClick={() => decrement(5)}>Decrement By Custom Step</Button>
        <Button onClick={() => set(20)}>Set Custom Value</Button>
      </Flex>
      <Text
        fs="2xl"
        fw="bold"
        cl={(theme) => (theme.mode === "dark" ? ["base", 200] : ["base", 700])}
      >
        {counter}
      </Text>
    </Flex>
  );
}

API

Return Value

Name	Type	Description
`increment`	`(step: number = 1) => void`	A function to increment the counter. By default, it has a step of `1`.
`decrement`	`(step: number = 1) => void`	A function to decrement the counter. By default, it has a step of `1`.
`set`	`() => void`	A function to set a value to the counter.
`counter`	`number`	The current value of the counter.

Go BackuseAnimation

Up NextuseCopyToClipboard