# react-outline-manager

> A simple helper for toggling CSS outlines.

Latest version **1.2.2** (published 2018-10-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-outline-manager
pnpm add react-outline-manager
yarn add react-outline-manager
bun add react-outline-manager
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2018-10-05 |
| First published | 2018-09-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 29.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Brody McKee |
| Maintainers | mrmckeb |
| Keywords | a11y, accessibility, accessible, outline, react-component, react-web, react |

## Links

- npm: https://www.npmjs.com/package/react-outline-manager
- Repository: https://github.com/mrmckeb/react-outline-manager
- npm.io page: https://npm.io/package/react-outline-manager

## 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.2.2 (latest) — 2018-10-05
- 1.2.1 — 2018-10-05
- 1.2.0 — 2018-09-21
- 1.1.0 — 2018-09-08
- 1.0.1 — 2018-09-08
- 1.0.0 — 2018-09-08

## README

# React Outline Manager

[![license](https://img.shields.io/npm/l/react-outline-manager.svg)](https://github.com/mrmckeb/react-outline-manager/blob/develop/LICENSE)
[![npm](https://img.shields.io/npm/v/react-outline-manager.svg)](https://www.npmjs.com/package/react-outline-manager)
[![type definitions](https://img.shields.io/npm/types/react-outline-manager.svg)](https://www.typescriptlang.org/)

A simple component to help manage focus outlines in React applications. No dependencies.

Includes CJS, ESM, and UMD (supporting browser usage) packages. TypeScript definitions are also included.

## How it works

Unlike CSS-only solutions that simply hide outlines on focusable elements, this component can help you to create
beautiful web apps without sacrificing accessibility.

When using this component, outlines on focusable elements are hidden until a user begins to interact with keyboard
(specifically, the `tab` key). Optionally, resuming mouse/touch input can hide outlines again.

From version [v1.2.0](https://github.com/mrmckeb/react-outline-manager/releases/tag/v1.2.0) and above, React v16.2+ is
required due to the introduction of `Fragment` support.

## Usage

To install with Yarn:
```sh
yarn add react-outline-manager
```

To install with npm:
```sh
npm install --save react-outline-manager
```

Once installed, simply import React Outline Manager and wrap your your application.

```js
import ReactOutlineManager from 'react-outline-manager';

const MyAppWithOutlineManager = () => (
  <ReactOutlineManager>
    <YourApp />
  </ReactOutlineManager>
);
```

Only wrapped components will be affected. This means that you can also choose to only wrap a part of you application if
desired.

## Props

|Prop       |Default value        |Description|
|-----------|---------------------|-----------|
|`className`|`ReactOutlineManager`|Use this to change the class of the wrapping component. This class is only visible when outlines should be hidden.|
|`tagName`  |`false`              |Use this to change the element type used in the wrapping component, such as a `div`. When `false` (or omitted), this component renders as a `Fragment` and the `className` will be applied to the `body` tag.|
|`toggle`   |`false`              |By default, outlines are enabled when a user hits tab, but not hidden again. Set this option to `true` if you want outlines to toggle on and off as the user switches between input methods.|

When `tagName` is set, you may also pass through standard React HTML props. For example:
```js
<ReactOutlineManager onClick={() => {}} />
```

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