braid-design-system
Version:
Themeable design system for the SEEK Group
39 lines (38 loc) • 1.19 kB
JavaScript
import { useState, useEffect } from "react";
import { createPortal } from "react-dom";
import { atoms } from "../../../css/atoms/atoms.mjs";
import { root } from "../../HiddenVisually/HiddenVisually.css.mjs";
let announcementCounter = 0;
const containerPrefix = "braid-announcement-container";
const Announcement = ({ children }) => {
const [announcementElement, setElement] = useState(null);
const className = [
atoms({
reset: "div",
position: "absolute",
bottom: 0,
overflow: "hidden"
}),
root
].join(" ");
useEffect(() => {
const announcementContainerId = `${containerPrefix}-${announcementCounter++}`;
const element = document.createElement("div");
element.setAttribute("id", announcementContainerId);
element.setAttribute("class", className);
element.setAttribute("aria-live", "polite");
element.setAttribute("aria-atomic", "true");
document.body.appendChild(element);
setElement(element);
return () => {
document.body.removeChild(element);
};
}, [className]);
if (!announcementElement) {
return null;
}
return createPortal(children, announcementElement);
};
export {
Announcement
};