react-visible-focus
A React component that emulates the :focus-visible spec
Last updated a month ago by filoxo .
MIT · Original npm · Tarball · package.json
$ cnpm install react-visible-focus 
SYNC missed versions from official npm registry.

react-visible-focus

This component attempts to emulate the :focus-visible pseudoselector behavior using similar heuristics but does not follow the spec completely

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.

.focus-not-visible * {
  outline: none;
}

Props

prop name default value description
className "focus-not-visible" the class name to be applied when focus should not be visible
elem "div" the wrapping element type; should always be a React element that renders an HTML node 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.

Current Tags

  • 1.0.0                                ...           latest (a month ago)

1 Versions

  • 1.0.0                                ...           a month ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 12
Dev Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |