useInterval

useInterval hook provides a simple way to handle complex intervals.

Import

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

Usage

function Demo() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount((prevCount) => prevCount + 1);
  };

  const { start, stop, toggle, active } = useInterval(increment, 1000);

  return (
    <Flex direction="column" gap={fr(2)}>
      <Text
        cl={(theme) => (theme.mode === "dark" ? ["base", 200] : ["base", 700])}
      >
        Counter: {count}
      </Text>
      <Button onClick={start}>Start</Button>
      <Button onClick={stop}>Stop</Button>
      <Button onClick={toggle}>Toggle</Button>
      <Text
        cl={(theme) => (theme.mode === "dark" ? ["base", 200] : ["base", 700])}
      >
        Active: {active.toString()}
      </Text>
    </Flex>
  );
}

API

Parameters

Name	Type	Description	Default
`callback`	`() => void`	The function that will be called on every iteration of the interval.	-
`delay`	`number`	The delay between interval iterations.	-

Return Value

Name	Type	Description
`start`	`() => void`	Function that starts the interval.
`stop`	`() => void`	Function that stops the interval.
`toggle`	`() => void`	Function that toggles the interval.
`active`	`boolean`	The state of the interval.

Go BackuseIdle

Up NextuseKeyboardShortcut