usePresence

usePresence hook provides a way to animate an element, before removing it from the DOM.

Import

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

Usage

function Demo() {
  const [shown, setShown] = useState(true);

  const present = usePresence(shown);

  return (
    <Stack>
      <Button onClick={() => setShown(!shown)}>Toggle Animation</Button>
      {present && (
        <Animation w={fr(30)} h={fr(30)} bg="primary" animated={shown} />
      )}
    </Stack>
  );
}

Change Animation Duration

function Demo() {
  const [shown, setShown] = useState(true);

  const present = usePresence(shown, 500); // This will await 500ms and then will change the present boolean

  return (
    <Stack>
      <Button onClick={() => setShown(!shown)}>Toggle Animation</Button>
      {present && (
        <Animation
          w={fr(30)}
          h={fr(30)}
          bg="primary"
          animated={shown}
          duration={500}
        />
      )}
    </Stack>
  );
}

API

Parameters

Name	Type	Description	Default
`present`	`boolean`	The boolean that should trigger the await of the animation.	-
`duration`	`number`	The duration of the animation.	`150`
`cb`	`() => void`	A callback that will be called after the animation is finished	-

Return Value

Name	Type	Description
`present`	`boolean`	The boolean that should be used to show and hide the element.

Go BackuseOutsideClick

Up NextusePrevious