开发者社区> 镜像站> NPM> react-visible-focus
react-visible-focus
A React component that emulates the :focus-visible spec
Last updated 8 months ago by filoxo .
MIT · Repository · 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

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.

Current Tags

  • 2.0.0                                ...           latest (8 months ago)

5 Versions

  • 2.0.0                                ...           8 months ago
  • 1.0.3                                ...           a year ago
  • 1.0.2                                ...           a year ago
  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dev Dependencies (3)
Dependents (0)
None