useOutsideClick

useOutsideClick hook provides a simple way to handle a click out of the element's constraints.

Import

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

Usage

function Demo() {
  const ref = useRef(null);

  const [clicked, setClicked] = useState(false);

  useOutsideClick(ref, () => {
    setClicked(true);
  });

  return (
    <Stack>
      <Box w={fr(30)} h={fr(30)} bg="primary" ref={ref} />
      <Text
        cl={(theme) => (theme.mode === "dark" ? ["base", 200] : ["base", 700])}
      >
        Clicked outside: {clicked.toString()}
      </Text>
    </Stack>
  );
}

API

Parameters

Name	Type	Description	Default
`ref`	`RefObject<any>`	The ref of the element that will be tracked.	-
`callback`	`() => void`	The function that will be called when the event occurs.	-

Go BackuseNetworkStatus

Up NextusePresence