react-outline-manager
v1.2.2
Published
A simple helper for toggling CSS outlines.
Downloads
124
Maintainers
Readme
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={() => {}} />