@zendeskgarden/container-tabs

@zendeskgarden/container-tabs

This package includes containers relating to tabs in the Garden Design System.

Installation

npm install @zendeskgarden/container-tabs

Usage

This container implements the tabs design pattern and can be used to build a tabbed interface. Check out storybook for live examples.

useTabs

import { useTabs } from '@zendeskgarden/container-tabs';

const tabs = ['Tab 1', 'Tab 2', 'Tab 3'];
const tabRefs = tabs.map(() => createRef(null));

const Tabs = () => {
  const { selectedItem, getTabProps, getTabListProps, getTabPanelProps } = useTabs();
  const tabComponents = [];
  const tabPanels = [];

  tabs.forEach((tab, index) => {
    tabComponents.push(
      <li
        {...getTabProps({
          item: tab,
          index,
          ref: tabRefs[index],
          key: tab,
          style: {
            borderBottom: `3px solid ${tab === selectedItem ? '#1f73b7' : 'transparent'}`
          }
        })}
      >
        {tab}
      </li>
    );

    tabPanels.push(
      <div
        {...getTabPanelProps({
          index,
          item: tab,
          key: tab,
          style: {
            padding: '10px 0',
            borderTop: '1px solid'
          }
        })}
      >
        {tab} Content
      </div>
    );
  });

  return (
    <>
      <ul
        {...getTabListProps({
          style: {
            display: 'flex'
          }
        })}
      >
        {tabComponents}
      </ul>
      {tabPanels}
    </>
  );
};

TabsContainer

import { TabsContainer } from '@zendeskgarden/container-tabs';

const Tabs = () => {
  const tabComponents = [];
  const tabPanels = [];

  return (
    <TabsContainer>
      {({ selectedItem, getTabProps, getTabListProps, getTabPanelProps }) => {
        tabs.forEach((tab, index) => {
          tabComponents.push(
            <li
              {...getTabProps({
                item: tab,
                index,
                ref: tabRefs[index],
                key: tab,
                style: {
                  borderBottom: `3px solid ${tab === selectedItem ? '#1f73b7' : 'transparent'}`
                }
              })}
            >
              {tab}
            </li>
          );

          tabPanels.push(
            <div
              {...getTabPanelProps({
                index,
                item: tab,
                key: tab,
                style: {
                  padding: '10px 0',
                  borderTop: '1px solid'
                }
              })}
            >
              {tab} Content
            </div>
          );
        });

        return (
          <>
            <ul
              {...getTabListProps({
                style: {
                  display: 'flex'
                }
              })}
            >
              {tabComponents}
            </ul>
            {tabPanels}
          </>
        );
      }}
      }
    </TabsContainer>
  );
};