# react-announce-a11y

> Used to have the screen reader announce messages to the user. Great for things like searches, filtering, loading, and error messages.

Latest version **1.1.1** (published 2022-06-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-announce-a11y
pnpm add react-announce-a11y
yarn add react-announce-a11y
bun add react-announce-a11y
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2022-06-23 |
| First published | 2020-08-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 22.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | jgage176 |
| Maintainers | jgage176 |
| Keywords | react, a11y, accessibility, narrator, Windows Narrator, screen reader, NVDA, chrome, edge, narrator, typescript, javascript, HTML5 |

## Links

- npm: https://www.npmjs.com/package/react-announce-a11y
- Repository: https://microsoft.visualstudio.com/DefaultCollection/Universal%20Store/_git/OC.OCEX.Common
- npm.io page: https://npm.io/package/react-announce-a11y

## Dependencies (1)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.1 (latest) — 2022-06-23
- 1.1.0 — 2022-06-23
- 1.0.1 — 2022-06-23
- 1.0.0 — 2020-08-18
- 0.0.1-security — 2020-08-18

## README

# Introduction

react-announce-a11y allows you to have the screen reader announce messages to the user from your React based project. Great for things like searches, filtering, loading, and error messages. Can be done in JSX/TSX or from any code as long as it is initialized in JSX. It is written in Typescript so it has full typing.

# Getting Started

## Installation

`npm install react-announce-a11y`

## Usage

That is all you need to get started, just import and create the <ReactAnnounce /> component with the message:

```
import { ReactAnnounce } from "react-announce-a11y";
...
export class AnnounceExample extends React.Component<any> {
  render(){
    <div>
      ...
      <ReactAnnounce announceMessage={`Found ${items.length} items`} />
    </div>
  }
}
```

However, sometimes you need to announce from outside render. In that case you will need to first add <InstantiateGlobalAnnounce /> to a place that will always exist (such as app.tsx or app.jsx)

### Typescript Example

```
import { InstantiateGlobalAnnounce } from "react-announce-a11y";
...
// In a central render, such as in your app.tsx
export class App extends React.Component<any> {
  render(){
    <InstantiateGlobalAnnounce />
  }
}

// helper.ts
import { AnnounceMessage } from "react-announce-a11y";

function search(val: any, searchText: string) {
    return val !== null &&
        ['undefined'].indexOf(typeof val) === -1 &&
        JSON.stringify(val).toUpperCase().indexOf(searchText.toUpperCase()) !== -1;
}

export function filterByString(items: any[], searchText: string): any[] {
    if (!searchText) {
        return items;
    }

    const itemsFound = items.filter(row =>
        Object.keys(row).some(key =>
            search(row[key], searchText)));

    AnnounceMessage(`Found ${items.length} items`);

    return itemsFound;
}
```

### Javascript Example

```
// In a central render, such as in your app.tsx (or .jsx)
import { InstantiateGlobalAnnounce } from "react-announce-a11y";

...

export class App extends React.Component<any> {
  render(){
    <InstantiateGlobalAnnounce />
  }
}

// helper.ts
import { AnnounceMessage } from "react-announce-a11y";

function search(val, searchText) {
    return val !== null &&
        ['undefined'].indexOf(typeof val) === -1 &&
        JSON.stringify(val).toUpperCase().indexOf(searchText.toUpperCase()) !== -1;
}

export function filterByString(items, searchText){
    if (!searchText) {
        return items;
    }

    const itemsFound = items.filter(row =>
        Object.keys(row).some(key =>
            search(row[key], searchText)));

    AnnounceMessage(`Found ${items.length} items`);

    return itemsFound;
}
```

---
_Source: https://npm.io/package/react-announce-a11y · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._