@fluentui/react-tabster
TypeScript icon, indicating that this package has built-in type declarations

9.22.9 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i @fluentui/react-tabster

Weekly Downloads

107,034

Version

9.22.9

License

MIT

Unpacked Size

464 kB

Total Files

113

Last publish

Collaborators

  • sopranopillow
  • microsoft1es
  • justslone
  • chrisdholt
  • miroslavstastny
  • levithomason
  • uifabricteam
  • uifrnbot
  • dzearing
  • layershifter
  • ling1726
  • travisspomer