react-visible-focus
This component attempts to emulate the :focus-visible pseudoselector behavior using similar heuristics but does not follow the spec completely
See it in action at https://filoxo.github.io/react-visible-focus/
Installation
yarn add -S react-visible-focus# or npm i -S react-visible-focus
Import
; { return <FocusVisible>/* more components */</FocusVisible> }
or via CDN
CSS
Provide the following CSS globally.
[
styled-components example
CSS-in-JS options, such as styled-components, are easily supported through the elem
prop.
const MyContainer = styleddiv` // Other styles &[data-focus-visible="false"] * { outline: none; }`// usage<FocusVisible elem=MyContainer>/*...*/</FocusVisible>
Props
prop name | default value | description |
---|---|---|
elem | "div" | the wrapping element type; should always be a React element that renders an HTML node as event handlers are bound to this |
...rest | any additional props are forwarded to the wrapper element |
Development
Run yarn start
to run the example page with livereloading enabled.
Run yarn build
to create a production build.