@fluentui/react-tabster

@fluentui/react-tabster

Tabster components for Fluent UI React

Library for focus management that leverages tabster.

The provider needs to be wrapped around your application:

<TabsterProvider>{children}</TabsterProvider>

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

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 (
    <TabsterProvider>
      <ArrowNavigationExample />
    </TabsterProvider>
  );
};