react-roving-tabindex

react-roving-tabindex

React implementation of a roving tabindex

Install

npm install --save react-roving-tabindex

Usage

import React from "react";
import {
  RovingTabIndexProvider,
  useRovingTabIndex,
  useFocusEffect
} from "react-roving-tabindex";

const ToolbarButton = ({ disabled = false, children }: Props) => {
  const ref = React.useRef<HTMLButtonElement>(null);
  // onKeyDown and onClick are stable for the lifetime of the component
  // they are used in:
  const [tabIndex, focused, onKeyDown, onClick] = useRovingTabIndex(
    ref,
    disabled
  );
  // Use some mechanism to set focus on the focused button,
  // in this case the included useFocusEffect hook:
  useFocusEffect(focused, ref);
  return (
    <button
      ref={ref}
      tabIndex={tabIndex}
      disabled={disabled}
      onKeyDown={onKeyDown}
      onClick={onClick}
    >
      {children}
    </button>
  );
};

const App = () => (
  <RovingTabIndexProvider>
    <ToolbarButton>First Button</ToolbarButton>
    <ToolbarButton>Second Button</ToolbarButton>
  </RovingTabIndexProvider>
);

License

MIT © stevejay