import { Meta } from "@storybook/blocks";

<Meta title="Hooks/use-screen-orientation" />

# use-screen-orientation hook

Call a function when a click happens outside the bounds of a component.

## Purpose

The use-outside-click hook detects when a click happens outside of a given
element and calls a function.

## Usage

A common scenario is clicking on a backdrop to close a popover. In the example
below, this is paired with `useDisclosure`.

```jsx
import React from "react";
import { useOutsideClick, useDisclosure } from "@conveyorhq/arrow-ds";

export const Component = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const popoverRef = React.useRef(null);

  useOutsideClick(popoverRef, () => {
    onClose();
  });

  return (
    <Box>
      <Button onClick={onOpen}>Open Popover</Button>
      {isOpen && <Box ref={popoverRef}>Popover; click outside to close</Box>}
    </Box>
  );
};
```

## API

### refs

Ref(s) of the element(s) where the outside click is going to happen

Required: Yes<br />
Default value: N/A<br />
Type: `RefObject`, `Array<RefObject>`

### callback

The function to call

Required: Yes<br />
Default value: N/A<br />
Type: `function`