@accessible/using-keyboard/dist/module/index.js

React utilities for adding accessible focus styles to elements when only someone is using keyboard navigation.

import * as React from 'react';
import useLayoutEffect from '@react-hook/passive-layout-effect';
import useEvent from '@react-hook/event';
import clsx from 'clsx'; // istanbul ignore next

export const useUsingKeyboard = (defaultUsingKeyboard = false) => {
  const [usingKeyboard, setUsingKeyboard] = React.useState(defaultUsingKeyboard);
  useEvent(document.body, 'mousedown', () => setUsingKeyboard(false));
  useEvent(document.body, 'keydown', () => setUsingKeyboard(true));
  return usingKeyboard;
};
export const BodyUsingKeyboard = ({
  className = 'using-keyboard',
  defaultUsingKeyboard = false,
  children = null
}) => {
  const usingKeyboard = useUsingKeyboard(defaultUsingKeyboard);

  function _ref() {
    document.body.classList.remove(className);
  }

  useLayoutEffect(() => {
    if (usingKeyboard) document.body.classList.add(className);
    return _ref;
  }, [usingKeyboard, className]);
  return children;
};
export const UsingKeyboard = ({
  className = 'using-keyboard',
  defaultUsingKeyboard = false,
  children
}) => /*#__PURE__*/React.cloneElement(children, Object.assign({}, children.props, {
  className: clsx(children.props.className, useUsingKeyboard(defaultUsingKeyboard) && className)
})); // istanbul ignore next

if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {
  BodyUsingKeyboard.displayName = 'BodyUsingKeyboard';
  UsingKeyboard.displayName = 'UsingKeyboard';
}