# react-focusarea

> A tiny component that fires an callback when focus completely leaves the container.

Latest version **1.2.0** (published 2020-03-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-focusarea
pnpm add react-focusarea
yarn add react-focusarea
bun add react-focusarea
```

## 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.2.0 |
| Published | 2020-03-01 |
| First published | 2020-01-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 36.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | slobaum |
| Maintainers | slobaum |

## Links

- npm: https://www.npmjs.com/package/react-focusarea
- Repository: https://github.com/slobaum/react-focusarea
- Homepage: https://github.com/slobaum/react-focusarea#readme
- Issues: https://github.com/slobaum/react-focusarea/issues
- npm.io page: https://npm.io/package/react-focusarea

## Recent versions

- 1.2.0 (latest) — 2020-03-01
- 1.1.0 — 2020-01-30
- 1.0.0 — 2020-01-29

## README

# react-focusarea

A small, accessible component that represents an area of focus for the user. Useful for dropdowns, modals, date-pickers, or any such area that should take some action if the users focus goes elsewhere (such as hiding the area or modifying the UI). Accepts a callback to be fired when focus completely leaves the container (meaning, focusing away from the box and all descendants).

Think of this as a more accessible, keyboard-friendly alternative to `onClickOutside`. Rather than defining global listeners on the window, this manipulates and watches user focus within its defined area only.

## Example:

```javascript
<div>
  <button type="button" onClick={() => setVisible(true)}>
    Show menu
  </button>
  {visible && (
    <FocusArea
      onFocusLost={() => setVisible(false)}
      aria-label="Dropdown with links"
      className="dropdown-classname"
    >
      <a href="http://www.google.com">Google</a>
      <a href="http://www.yahoo.com">Yahoo</a>
    </FocusArea>
  )}
</div>
```

## Props

- `onFocusLost` **required**: function to be fired when focus leaves the area
- `aria-labelledby` **labelledby or label is required**: pointer to accessibility label used to describe the area (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute)
- `aria-label` **labelledby or label is required**: (alternative to `aria-labelledby`) accessibility label used to describe the area (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute)
- `role` (default: `region`): accessibility property used to provide semantic purpose of this area (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques)
- `autoFocus` (default: `true`): by default, FocusArea will receive focus as soon as they are rendered. If this area is rendered before focus monitoring is desired, set this to false.
- `outline`: by default, FocusArea will not show a visible focus outline. Either define `style` or set this to true to leave outline as browser default.
- `allowDirectRefocus`: by default, if you tab off top-level FocusArea into one of its descendants, you can't focus back to the top-level element. To override this (especially useful to see accessibility label), set to `true`

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