React utilities for adding accessible focus styles to elements when only someone is using keyboard navigation.
npm install @accessible/using-keyboardnpm i @accessible/using-keyboard
React utilities for adding accessible focus styles to elements when someone is using keyboard navigation.
``jsx harmony
import {
UsingKeyboard,
BodyUsingKeyboard,
useUsingKeyboard,
} from '@accessibile/using-keyboard'
const App = (props) => (
// 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
)
`
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
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. |MIT