2.0.0 • Published 5 years ago

react-visible-focus v2.0.0

Weekly downloads
48
License
MIT
Repository
github
Last release
5 years ago

react-visible-focus

npm.io npm.io

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 namedefault valuedescription
elem"div"the wrapping element type; should always be a React element that renders an HTML node as event handlers are bound to this
...restany 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.