@interop-ui/react-announce - npm Package Compare versions

Comparing version 0.0.1-14 to 0.0.1-15

package.json

		{
		"name": "@interop-ui/react-announce",
		"version": "0.0.1-14",
		"version": "0.0.1-15",
		"license": "MIT",
		@@ -20,5 +20,5 @@ "source": "src/index.ts",
		"dependencies": {
		"@interop-ui/react-polymorphic": "0.0.1-1",
		"@interop-ui/react-utils": "0.0.1-14",
		"@interop-ui/utils": "0.0.1-6"
		"@interop-ui/react-polymorphic": "0.0.1-2",
		"@interop-ui/react-utils": "0.0.1-15",
		"@interop-ui/utils": "0.0.1-7"
		},
		@@ -25,0 +25,0 @@ "devDependencies": {

README.md

		@@ -13,26 +13,2 @@ # `react-announce`

		```js
		import * as React from 'react';
		import { Announce } from '@interop-ui/react-announce';
		import { VisuallyHidden } from '@interop-ui/react-visually-hidden';

		function StatusChange(props) {
		return (
		<div>
		<VisuallyHidden>
		{/* Content inside Announce will inform screen reader users of a status change */}
		<Announce aria-relevant="all">Your friend is {props.status}</Announce>
		</VisuallyHidden>
		{/*
		You can render the content visually however you'd like. Announce content is added to an
		aria-live region. They'll be rendered visually by default, but since we've visually hidden
		the content above we can mirror it for sighted users and adapt our interface as needed, so
		long as the same content is effectively delivered to users in either context.
		*/}
		<div style={{ background: props.status === 'online' ? 'forestgreen' : 'crimson' }}>
		Friend status: {props.status}
		</div>
		</div>
		);
		}
		```
		View docs [here](https://radix-ui.com/primitives/docs/components/announce).

New alerts