@react-aria/tabs

What is @react-aria/tabs?

@react-aria/tabs is a library that provides accessible tab components for React applications. It is part of the React Aria collection, which focuses on providing high-quality, accessible UI components. The package helps developers create tabbed interfaces that are compliant with WAI-ARIA standards, ensuring that they are usable by people with disabilities.

What are @react-aria/tabs's main functionalities?

Basic Tab Implementation

This code demonstrates a basic implementation of a tabbed interface using @react-aria/tabs. It sets up a tab list with two tabs and their corresponding content.

```jsx
import { useTabListState } from '@react-stately/tabs';
import { useTab, useTabList, useTabPanel } from '@react-aria/tabs';
import { TabList, Tab, TabPanel } from '@react-spectrum/tabs';

function MyTabs() {
  let state = useTabListState({
    defaultSelectedKey: 'tab1',
    children: [
      { key: 'tab1', title: 'Tab 1', children: 'Content 1' },
      { key: 'tab2', title: 'Tab 2', children: 'Content 2' }
    ]
  });

  let { tabListProps } = useTabList(state);

  return (
    <div>
      <TabList {...tabListProps}>
        {state.collection.map((item) => (
          <Tab key={item.key} item={item} state={state} />
        ))}
      </TabList>
      <TabPanel key={state.selectedItem.key} state={state} />
    </div>
  );
}
```

Customizable Tabs

This example shows how to customize the appearance of the tabs and tab panels using inline styles. The tabs have a blue color, and the tab list has a light gray background.

```jsx
import { useTabListState } from '@react-stately/tabs';
import { useTab, useTabList, useTabPanel } from '@react-aria/tabs';
import { TabList, Tab, TabPanel } from '@react-spectrum/tabs';

function CustomTabs() {
  let state = useTabListState({
    defaultSelectedKey: 'tab1',
    children: [
      { key: 'tab1', title: 'Tab 1', children: 'Content 1' },
      { key: 'tab2', title: 'Tab 2', children: 'Content 2' }
    ]
  });

  let { tabListProps } = useTabList(state);

  return (
    <div>
      <TabList {...tabListProps} style={{ backgroundColor: 'lightgray' }}>
        {state.collection.map((item) => (
          <Tab key={item.key} item={item} state={state} style={{ color: 'blue' }} />
        ))}
      </TabList>
      <TabPanel key={state.selectedItem.key} state={state} style={{ padding: '10px' }} />
    </div>
  );
}
```

Dynamic Tabs

This example demonstrates how to create dynamic tabs that can be added or removed at runtime. The `addTab` function adds a new tab to the state, and the tab list updates accordingly.

```jsx
import { useState } from 'react';
import { useTabListState } from '@react-stately/tabs';
import { useTab, useTabList, useTabPanel } from '@react-aria/tabs';
import { TabList, Tab, TabPanel } from '@react-spectrum/tabs';

function DynamicTabs() {
  const [tabs, setTabs] = useState([
    { key: 'tab1', title: 'Tab 1', children: 'Content 1' },
    { key: 'tab2', title: 'Tab 2', children: 'Content 2' }
  ]);

  let state = useTabListState({
    defaultSelectedKey: 'tab1',
    children: tabs
  });

  let { tabListProps } = useTabList(state);

  const addTab = () => {
    const newTab = { key: `tab${tabs.length + 1}`, title: `Tab ${tabs.length + 1}`, children: `Content ${tabs.length + 1}` };
    setTabs([...tabs, newTab]);
  };

  return (
    <div>
      <button onClick={addTab}>Add Tab</button>
      <TabList {...tabListProps}>
        {state.collection.map((item) => (
          <Tab key={item.key} item={item} state={state} />
        ))}
      </TabList>
      <TabPanel key={state.selectedItem.key} state={state} />
    </div>
  );
}
```

Other packages similar to @react-aria/tabs

react-tabs

react-tabs is a popular library for creating accessible tabbed interfaces in React. It provides a simple API and is highly customizable. Compared to @react-aria/tabs, react-tabs is more lightweight but may require additional effort to ensure full accessibility compliance.

react-bootstrap

react-bootstrap is a complete UI framework for React that includes a variety of components, including tabs. It is built on top of Bootstrap and provides a consistent design language. While it offers more components than @react-aria/tabs, it may be heavier and less focused on accessibility.

material-ui

material-ui is a comprehensive UI library for React that follows Google's Material Design guidelines. It includes a wide range of components, including tabs. It offers a rich set of features and customization options but may be more complex to use compared to @react-aria/tabs.

README

@react-aria/tabs

This package is part of react-spectrum. See the repo for more details.