npm i @accessible/using-keyboard

React utilities for adding accessible focus styles to elements when someone is using keyboard navigation.

Quick Start

``jsx harmony
import {
UsingKeyboard,
BodyUsingKeyboard,
useUsingKeyboard,
} from '@accessibile/using-keyboard'

const App = (props) => (



A React hook that returns true when the keyboard was used more recently than the mouse for
focusing an element.

#### Arguments

| Argument | Type | Required | Default | Description |
| -------------------- | --------- | -------- | ------- | --------------------------------------- |
| defaultUsingKeyboard | boolean | false | false | Sets the default value of usingKeyboard |

#### Returns boolean

$3

A React component that adds a using-keyboard class to the when the keyboard was used more recently
than the mouse for focusing an element. It removes the class each time a mousedown event fires.

| Prop | Type | Required | Default | Description |
| -------------------- | -------------------- | -------- | ------------------ | -------------------------------------------------------------------------------------- |
| className | string | false | "using-keyboard" | This is the class name that gets appended to the body |
| defaultUsingKeyboard | boolean | false | false | Sets the default value of usingKeyboard |
| children | React.ReactElement | false | undefined | By default this renders no children, but it will render any children you provide here. |

$3

A React component that adds a using-keyboard class to its child element when the keyboard was used more recently
than the mouse for focusing an element. It removes the class each time a mousedown event fires.

| Prop | Type | Required | Default | Description |
| -------------------- | -------------------- | -------- | ------------------ | -------------------------------------------------------------------------------------- |
| className | string | false | "using-keyboard" | This is the class name that gets appended to the child element |
| defaultUsingKeyboard | boolean | false | false | Sets the default value of usingKeyboard |
| children | React.ReactElement | false | undefined` | By default this renders no children, but it will render any children you provide here. |

LICENSE

MIT