{"_id":"@blinq-reach/alert","name":"@blinq-reach/alert","dist-tags":{"latest":"0.18.0"},"versions":{"0.18.0":{"name":"@blinq-reach/alert","version":"0.18.0","description":"Screen-reader-friendly alert messages.","author":{"name":"React Training","email":"hello@reacttraining.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/reach/reach-ui.git","directory":"packages/alert"},"dependencies":{"@blinq-reach/polymorphic":"0.18.0","@blinq-reach/utils":"0.18.0","@blinq-reach/visually-hidden":"0.18.0"},"devDependencies":{"react":"^18.2.0","react-dom":"^18.2.0","tsup":"^6.1.3","@reach-internal/dev":"0.0.0","@reach-internal/test":"0.0.0","@reach-internal/tsconfig":"0.0.0"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"main":"./dist/reach-alert.cjs.js","types":"./dist/reach-alert.d.ts","publishConfig":{"access":"public"},"module":"./dist/reach-alert.mjs","scripts":{"build":"tsup"},"bugs":{"url":"https://github.com/reach/reach-ui/issues"},"homepage":"https://github.com/reach/reach-ui#readme","_id":"@blinq-reach/alert@0.18.0","_integrity":"sha512-RmEzip01AvZF4YYzd/Lg/KXZ5oslgRcOLIhNZvS0322RxEHJEyGtMrNSxlSxlL8K3xccmPKUvnxKqUogajT28w==","_resolved":"/tmp/2f56ed6f75975bfc4ae682097aa60bb5/blinq-reach-alert-0.18.0.tgz","_from":"file:blinq-reach-alert-0.18.0.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-RmEzip01AvZF4YYzd/Lg/KXZ5oslgRcOLIhNZvS0322RxEHJEyGtMrNSxlSxlL8K3xccmPKUvnxKqUogajT28w==","shasum":"4b27b7b358d21adc9a27b32f770a14d5ff1eba97","tarball":"https://registry.npmjs.org/@blinq-reach/alert/-/alert-0.18.0.tgz","fileCount":4,"unpackedSize":4435,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCwvNr25jL/iozshrQmw45Wam1HU4f22ltWlDEwOOTqwIhAOloFCDdP4CgjzFu/BZQTAcQ2R4n5GQhIh1K6mCTPROg"}]},"_npmUser":{"name":"willhackett","email":"will@willhackett.com"},"directories":{},"maintainers":[{"name":"willhackett","email":"will@willhackett.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alert_0.18.0_1684374045815_0.6040306272008478"},"_hasShrinkwrap":false}},"time":{"created":"2023-05-18T01:40:45.732Z","0.18.0":"2023-05-18T01:40:45.990Z","modified":"2023-05-18T01:40:46.250Z"},"maintainers":[{"name":"willhackett","email":"will@willhackett.com"}],"description":"Screen-reader-friendly alert messages.","homepage":"https://github.com/reach/reach-ui#readme","repository":{"type":"git","url":"git+https://github.com/reach/reach-ui.git","directory":"packages/alert"},"author":{"name":"React Training","email":"hello@reacttraining.com"},"bugs":{"url":"https://github.com/reach/reach-ui/issues"},"license":"MIT","readme":"# @reach/alert\n\n[![Stable release](https://img.shields.io/npm/v/@reach/alert.svg)](https://npm.im/@reach/alert) ![MIT license](https://badgen.now.sh/badge/license/MIT)\n\n[Docs](https://reach.tech/alert) | [Source](https://github.com/reach/reach-ui/tree/main/packages/alert) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#alert)\n\nScreen-reader-friendly alert messages. In many apps developers add \"alert\" messages when network events or other things happen. Users with assistive technologies may not know about the message unless you develop for it.\n\nThe Alert component will announce to assistive technologies whatever you render to the screen. If you don't have a screen reader on you won't notice a difference between rendering `<Alert>` vs. a `<div>`.\n\n```jsx\nfunction Example(props) {\n\tconst [messages, setMessages] = React.useState([]);\n\treturn (\n\t\t<div>\n\t\t\t<button\n\t\t\t\tonClick={() => {\n\t\t\t\t\tsetMessages((prevMessages) =>\n\t\t\t\t\t\tprevMessages.concat([`Message #${prevMessages.length + 1}`])\n\t\t\t\t\t);\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tsetMessages((prevMessages) => prevMessages.slice(1));\n\t\t\t\t\t}, 5000);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tAdd a message\n\t\t\t</button>\n\t\t\t<div>\n\t\t\t\t{messages.map((message, index) => (\n\t\t\t\t\t<Alert key={index}>{message}</Alert>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n```\n","readmeFilename":"README.md"}