@fluentui/react-tabster

@fluentui/react-tabster

Tabster components for Fluent UI React

Experimental library for focus management that leverages tabster.

These library is not production-ready and should never be used in product. This space is useful for testing new features whose APIs might change before final release.

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>
  );
};