@fluentui/react-tabster

@fluentui/react-tabster

Tabster components for Fluent UI React

Library for focus management that leverages tabster.

The API currently only supports declarative data-* attributes that are returned using the exported react hooks:

import * as React from 'react';
import { useArrowNavigationGroup } from '@fluentui/react-tabster';

const Item: React.FC = ({ children }) => <div tabIndex={0}>Item</div>;

const ArrowNavigationExample: React.FC = ({ children }) => {
  const attrs = useArrowNavigationGroup({ circular: true });

  return (
    <div {...attrs}>
      <Item />
      <Item />
      <Item />
      <Item />
      <Item />
      <Item />
    </div>
  );
};

const App: React.FC = () => {
  return <ArrowNavigationExample />;
};

Similar packages

Other packages similar to @fluentui/react-tabster

react-focus-lock

react-focus-lock is a package that provides a focus lock mechanism for React components. It ensures that focus stays within a specified area, similar to the focus trap zone feature in @fluentui/react-tabster. However, it is more focused on providing a simple and lightweight solution for focus management.

react-aria

react-aria is a library that provides a comprehensive set of hooks for building accessible React components. It offers a wide range of accessibility features, including focus management, keyboard navigation, and ARIA roles and properties. Compared to @fluentui/react-tabster, react-aria provides a more extensive set of tools for building fully accessible applications.

focus-trap-react

focus-trap-react is a React wrapper for the focus-trap library, which provides a focus management solution to trap focus within a DOM node. It is similar to the focus trap zone feature in @fluentui/react-tabster but is more focused on providing a straightforward and easy-to-use API for focus trapping.