React Outline Manager

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 and above, React v16.2+ is required due to the introduction of Fragment support.

Usage

To install with Yarn:

yarn add react-outline-manager

To install with npm:

npm install --save react-outline-manager

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

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:

<ReactOutlineManager onClick={() => {}} />