a11y-hooks

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