<UsingKeyboard>
npm i @accessible/using-keyboard
React utilities for adding accessible focus styles to elements when someone is using keyboard navigation.
Quick Start
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>
)
API
useUsingKeyboard(defaultUsingKeyboard)
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 |
boolean
Returns <BodyUsingKeyboard>
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. |
<UsingKeyboard>
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