@accessible/using-keyboard
Version:
React utilities for adding accessible focus styles to elements when only someone is using keyboard navigation.
3 lines (2 loc) • 751 B
JavaScript
import{useState as o,cloneElement as e}from"react";import r from"@react-hook/passive-layout-effect";import a from"@react-hook/event";import s from"clsx";var t=function(e){void 0===e&&(e=0);var[r,s]=o(e);return a(document.body,"mousedown",()=>s(0)),a(document.body,"keydown",()=>s(1)),r},n=o=>{function e(){document.body.classList.remove(a)}var{className:a="using-keyboard",defaultUsingKeyboard:s=0,children:n=null}=o,d=t(s);return r(()=>(d&&document.body.classList.add(a),e),[d,a]),n},d=o=>{var{className:r="using-keyboard",defaultUsingKeyboard:a=0,children:n}=o;return e(n,Object.assign({},n.props,{className:s(n.props.className,t(a)&&r)}))};export{n as BodyUsingKeyboard,d as UsingKeyboard,t as useUsingKeyboard};
//# sourceMappingURL=index.mjs.map