https://github.com/imp-dance/native-popover-react
https://github.com/imp-dance/native-popover-react
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/imp-dance/native-popover-react
- Owner: imp-dance
- Created: 2024-04-26T17:14:04.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-23T14:34:49.000Z (9 months ago)
- Last Synced: 2025-01-24T14:42:03.887Z (5 months ago)
- Language: TypeScript
- Size: 18.6 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# native-popover-react
> Utilize the [native web Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) in React
```tsx
import { NativePopover } from "native-popover-react";
function App() {
return (
(
Open tooltip
)}
popover={(props) => (
Popover content
)}
/>
);
}
```
## Controls
```tsx
import {
NativePopover,
usePopoverControls,
} from "native-popover-react";
function App() {
const popover = usePopoverControls();
return (
{popover.isOpen ? "Close popover" : "Open popover"}
(
Popover content
)}
/>
);
}
```
### Closing popover
You can close the popover using `usePopoverControls`, or by utilizing the second argument in the `popover` prop to create a close button:
```tsx
Toggle}
popover={(props, closeProps) => (
Popover content
X
)}
/>
```
## Anchoring
> [!WARNING]
> **Experimental**: This might not be supported in all modern browsers yet.
Enable an [anchor](https://developer.chrome.com/blog/introducing-popover-api#anchor_positioning) between `trigger` and `popover`.
```tsx
import { NativePopover } from "native-popover-react";
function App() {
return (
Toggle}
popover={(props) => (
Popover content
)}
/>
);
}
```