Package Exports

@fluentui/react-tabster

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@fluentui/react-tabster) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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