React a11y hooks 🎣♿

A set of hooks to make it easy for everyone to make their site more accessible and improve their ux.

table of contents:

• useFocus
• useDetectKeyboard

useFocus

• Programmatically focuses bound element on mount or whenever shouldFocus is set to true.
• check here for example usage.

const bind = useFocus(arguments?: {
  shouldFocus?: boolean;
  ref?: React.RefObject<HTMLElement>;
})

  ...
   <input {...bind} />

Arguments

| Name | Type | Required | Description | | ----------- | ---------------------- | -------- | -------------------------------------------------------------------------- | | shouldFocus | boolean | false | if provided the bound element will be focused whenever it switches to true | | ref | React.MutableRefObject | false | if provided it will focus on the given ref instead of returning bind |

useDetectKeyboard

useDetectKeyboard(className?: string)

• Adds class .user-is-tabbing to document body if user is using tab, this way things like focus styles can be hidden only when the user is navigating via keyboard.
• check here for example usage.

// in your app.js
function App() {
  useDetectKeyboard();
}

• also returns a boolean

// with styled components
 function App() {
  const usesTab: boolean = useDetectKeyboard();

  return (
    <GlobalStyles usesTab={usesTab}>
  )

Arguments

| Name | Type | Required | Description | | --------- | ------ | -------- | ---------------------------------------------------------------------------------- | | className | string | false | if specified adds the provided className to the body instead of .user-is-tabbing |