2.0.0 • Published 5 years ago
react-visible-focus v2.0.0
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
import FocusVisible from 'react-visible-focus';
export default function YourComponent(props) {
return (
<FocusVisible>{/* more components */}</FocusVisible>
)
}
or via CDN
<script src="/react-visible-focus.umd.js"></script>
<script>
const App = () => React.createElement(
ReactVisibleFocus,
null,
React.createElement("p", null, "Your app goes here")
)
ReactDOM.render(App(), document.querySelector("#root"))
</script>
CSS
Provide the following CSS globally.
[data-focus-visible="false"] * {
outline: none;
}
styled-components example
CSS-in-JS options, such as styled-components, are easily supported through the elem
prop.
import React from 'react'
import styled from 'styled-components'
import FocusVisible from 'react-visible-focus'
const MyContainer = styled.div`
// 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.