Skip to content

Commit f87dd24

Browse files
authored
document prop in useOverlay hook
1 parent 7326474 commit f87dd24

File tree

1 file changed

+11
-9
lines changed

1 file changed

+11
-9
lines changed

content/guides/react/hooks/use-overlay.mdx

+11-9
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ These behaviors include:
1919
### Usage
2020

2121
```javascript live noinline
22-
const DemoOverlay = ({onClickOutside, initialFocusRef, returnFocusRef, ignoreClickRefs, onEscape, ...rest}) => {
23-
const overlayProps = useOverlay({returnFocusRef, onEscape, ignoreClickRefs, onClickOutside, initialFocusRef})
22+
const DemoOverlay = ({onClickOutside, initialFocusRef, returnFocusRef, ignoreClickRefs, onEscape, preventFocusOnOpen, ...rest}) => {
23+
const overlayProps = useOverlay({returnFocusRef, onEscape, ignoreClickRefs, onClickOutside, initialFocusRef, preventFocusOnOpen})
2424
return <Box height="200px" bg="green.4" {...overlayProps} {...rest} />
2525
}
2626

@@ -41,6 +41,7 @@ const DemoComponent = () => {
4141
initialFocusRef={initialFocusRef}
4242
onEscape={closeOverlay}
4343
onClickOutside={closeOverlay}
44+
preventFocusOnOpen={true}
4445
>
4546
<Button>Button One</Button>
4647
<Button ref={initialFocusRef}>Button Two</Button>
@@ -55,10 +56,11 @@ render(<DemoComponent />)
5556

5657
#### UseOverlaySettings
5758

58-
| Name | Type | Required | Description |
59-
| :-------------- | :-------------------------------- | :------: | :------------------------------------------------------------------------------------------------------------------------------------ |
60-
| onEscapePress | `function` | required | Function to call when user presses the Escape key |
61-
| onOutsideClick | `function` | required | Function to call when user clicks outside of the overlay |
62-
| ignoreClickRefs | `React.RefObject<HTMLElement> []` | optional | Refs to click clicks on in the `onOutsideClick` function, useful for ignoring clicks on elements that trigger the overlay visibility. |
63-
| initialFocusRef | `React.RefObject<HTMLElement>` | optional | Ref to focus when overlay is mounted. |
64-
| returnFocusRef | `React.RefObject<HTMLElement>` | required | Ref to focus when overlay is unmounted. Important for accessibility. |
59+
| Name | Type | Required | Description |
60+
| :----------------- | :-------------------------------- | :------: | :------------------------------------------------------------------------------------------------------------------------------------ |
61+
| onEscapePress | `function` | required | Function to call when user presses the Escape key |
62+
| onOutsideClick | `function` | required | Function to call when user clicks outside of the overlay |
63+
| ignoreClickRefs | `React.RefObject<HTMLElement> []` | optional | Refs to click clicks on in the `onOutsideClick` function, useful for ignoring clicks on elements that trigger the overlay visibility. |
64+
| initialFocusRef | `React.RefObject<HTMLElement>` | optional | Ref to focus when overlay is mounted. |
65+
| returnFocusRef | `React.RefObject<HTMLElement>` | required | Ref to focus when overlay is unmounted. Important for accessibility. |
66+
| preventFocusOnOpen | `boolean` | optional | When true, prevents focus when overlay is mounted, even if `initialFocusRef` is present.

0 commit comments

Comments
 (0)