Focus Indicator For React – focus-rings

A centralized system for displaying and stylizing focus indicators anywhere on a webpage.

Basic usage:

1. Install and import the focus-rings into your React app.

# Yarn
$ yarn add react-focus-rings

# NPM
$ npm i react-focus-rings

import * as React from "react";
import ReactDOM from "react-dom";
import { FocusRing, FocusRingScope } from "react-focus-rings";
import "focus-rings/src/styles.css";

2. Here is a minimal example that shows how to use this component.

function Button() {
  return (
    <FocusRing offset={-2}>
      <button onClick={console.log}>Click Me</button>
    </FocusRing>
  );
}
function Anchor({ children }: { children: React.ReactNode }) {
  return (
    <FocusRing>
      <a tabIndex={0} href="#">
        {children}
      </a>
    </FocusRing>
  );
}
function Scrollable({ children }: { children: React.ReactNode }) {
  const containerRef = React.useRef<HTMLDivElement>(null);
  // Render the scope _within_ the scrolling container so that it will render
  // in the same layer and perfectly follow content as it scrolls.
  // Note that the container still needs a `position: relative`.
  return (
    <div
      ref={containerRef}
      style={{
        position: "relative",
        height: 100,
        overflow: "scroll",
        backgroundColor: "#eee",
        padding: 8
      }}
    >
      <FocusRingScope containerRef={containerRef}>{children}</FocusRingScope>
    </div>
  );
}
function App() {
  const containerRef = React.useRef<HTMLDivElement>(null);
  return (
    <FocusRingScope containerRef={containerRef}>
      <div className="app-container" ref={containerRef}>
        <div className="content">
          <p>Here's a paragraph with some text.</p>
          <Button />
          <Button />
          <Button />
          <p>
            Here's another paragraph with more text. This one has an{" "}
            <Anchor>anchor tag inside it</Anchor> that you can also focus.
          </p>
          <p>
            This is an example of a scrolling container that uses a nested{" "}
            <code>FocusRingScope</code> to ensure that rings are always rendered
            in the right position.
          </p>
          <Scrollable>
            <Button />
            <p>
              Some padding text that hopefully wraps multiple lines to add
              vertical space so that the buttons are forced to scroll the
              container when they receive focus.
            </p>
            <Button />
            <p>More padding text</p>
            <Button />
          </Scrollable>
        </div>
      </div>
    </FocusRingScope>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));

3. All possible props.

within?: boolean;
enabled?: boolean;
focused?: boolean;
offset?: Offset | number;
focusTarget?: React.RefObject<Element>;
ringTarget?: React.RefObject<Element>;
ringClassName?: string;
focusClassName?: string;
focusWithinClassName?: string;

Preview:

Download Details:

Author: discord

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/discord/focus-rings

License: MIT