npm i @accessible/using-keyboard
React utilities for adding accessible focus styles to elements when someone is using keyboard navigation.
import {
UsingKeyboard,
BodyUsingKeyboard,
useUsingKeyboard,
} from '@accessibile/using-keyboard'
const App = (props) => (
<UsingKeyboard className='using-keyboard'>
<div className='my-app'>
// This will have the class name 'my-app using-keyboard' // when a
keyboard drew the last focus in a document. // That is, during keyboard
navigation
</div>
</UsingKeyboard>
)A React hook that returns true when the keyboard was used more recently than the mouse for
focusing an element.
| Argument | Type | Required | Default | Description |
|---|---|---|---|---|
| defaultUsingKeyboard | boolean |
false |
false |
Sets the default value of usingKeyboard |
A React component that adds a using-keyboard class to the <body> 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. |
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. |
MIT