@hex2r/react-announcer/dist/index.cjs.js

Accessible announcer component for React apps using the Context API. Renders live-region messages for screen readers and provides a simple hook for dispatching announcements from anywhere in your component tree.

"use strict";var e=require("react"),t=require("uuid");const r=e.createContext(void 0),n={position:"absolute",width:"1px",height:"1px",padding:0,margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",border:0};exports.AnnouncementRegion=function({announcements:t,srOnlySupported:r=!1,stackLimit:s=4}){const i=r?{className:"sr-only"}:{style:n};return e.createElement("div",Object.assign({role:"region","aria-live":"polite","aria-atomic":"true"},i),t.slice(-s).map(({id:t,assertive:r,message:n})=>e.createElement("div",Object.assign({key:t,role:r?"alert":"status","aria-live":r?"assertive":"polite"},i),n)))},exports.AnnouncerContext=r,exports.AnnouncerProvider=({children:n})=>{const[s,i]=e.useState([]),o=e.useCallback(({message:e,assertive:r=!1})=>{const n={id:t.v4(),message:e,assertive:r};i(e=>[...e,n])},[]),a=e.useMemo(()=>({announce:o}),[o]);return e.createElement(r.Provider,{value:a},n(s))},exports.useAnnouncer=()=>{const t=e.useContext(r);if(!t)throw new Error("useAnnouncer must be used within the AnnouncerProvider");return t};
//# sourceMappingURL=index.cjs.js.map