use-focus-visible

A react hook based on https://github.com/WICG/focus-visible

This package is a very slightly modified implementation of the work of Jeroen Ransijn. See the original source here: https://github.com/WICG/focus-visible/issues/205

Install

npm install use-focus-visible

OR

yarn add use-focus-visible

Usage

import React from 'react'

import { FocusVisibleManager, useFocusVisible}  from 'use-focus-visible'

function Button(props) {
  const { focusVisible, onFocus, onBlur } = useFocusVisible();
  return (
    <button
      style={{ outline: focusVisible ? "2px solid black" : "none" }}
      onFocus={onFocus}
      onBlur={onBlur}
    >
      {props.children} {focusVisible ? "yes" : "no"}
    </button>
  )
}

function App() {
  render() {
    return (
      <FocusVisibleManager>
        <Button />
      </FocusVisibleManager>
    );
  }
}

Credit

Credit to Web Incubator CG and Jeroen Ransijn or the original work.

This project was created using create-react-library

License

MIT © dipunm