Responsive Popover
Overwriting the default Popover positioning styles on small screens using the updatePosition
prop.
Team meeting
We are going to discuss what we have achieved on the project.
12 Jan 2022 18:00 to 19:00
Alert 10 minutes before start
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
import * as Ariakit from "@ariakit/react";import "./style.css";import useMedia from "./use-media.ts";export default function Example() {const isLarge = useMedia("(min-width: 640px)", true);const updatePosition = () => {const { popoverElement, mounted } = popover.getState();if (!popoverElement) return;Object.assign(popoverElement.style, {display: mounted ? "block" : "none",position: "fixed",width: "100%",bottom: "0px",padding: "12px",});};return (Accept inviteclassName="popover">Team meetingWe are going to discuss what we have achieved on the project.<div><p>12 Jan 2022 18:00 to 19:00</p><p>Alert 10 minutes before start</p></div>);}import * as Ariakit from "@ariakit/react";import "./style.css";import useMedia from "./use-media.ts";export default function Example() {const isLarge = useMedia("(min-width: 640px)", true);const updatePosition = () => {const { popoverElement, mounted } = popover.getState();if (!popoverElement) return;Object.assign(popoverElement.style, {display: mounted ? "block" : "none",position: "fixed",width: "100%",bottom: "0px",padding: "12px",});};return (Accept inviteclassName="popover">Team meetingWe are going to discuss what we have achieved on the project.<div><p>12 Jan 2022 18:00 to 19:00</p><p>Alert 10 minutes before start</p></div>);}