@asphalt-react/tab NPM

Tab

npm

Tab allow users to navigate easily between views within the same context. It contains a list of links that can either take the user to another page or to another section on the same page. Tab is responsive and is scrollable when number of tabs exceeds it's container's width.

Usage

import { Tabs, TabList, TabItem, TabPanel } from "@asphalt-react/tab"

  return (
    <Tabs>
      <TabList>
        <TabItem active asProps={{ href: "?tab=1" }}>
          Tab 1
        </TabItem>
        <TabItem asProps={{ href: "?tab=2" }}>
          Tab 2
        </TabItem>
        <TabItem asProps={{ href: "?tab=3" }}>
          Tab 3
        </TabItem>
      </TabList>
      <TabPanel active>
        Content 1
      </TabPanel>
      <TabPanel>
        Content 2
      </TabPanel>
      <TabPanel>
        Content 3
      </TabPanel>
    </Tabs>
  )

Accessibility

Use ← or → arrow keys to toggle between tabs.
Press enter to activate the tab.
Press tab to go out of the tablist.

Hooks

Tab exports a useTabs hook which returns a prop getter function and the active tab item index. Call the getter function to generate props which then can be passed in TabItem.

useTabs

import React from "react"
import { Link } from "@reach/router"
import {
  Tabs,
  TabList,
  TabItem,
  TabItemIcon,
  TabPanel,
  useTabs,
} from "@asphalt-react/tab"
import { IconPlaceholder } from "@asphalt-react/iconpack"

export const HooksExample = () => {

  const { activeIndex, getItemProps } = useTabs({ defaultIndex: 0, as: Link })

  return (
    <Tabs>
      <TabList>
        <TabItem
          active={activeIndex === 0}
          asProps={{ to: "?tab=1" }}
          {...getItemProps()}
        >
          <TabItemIcon>
            <IconPlaceholder />
          </TabItemIcon>
          <span>Tab 1</span>
        </TabItem>
        <TabItem
          active={activeIndex === 1}
          asProps={{ to: "?tab=2" }}
          {...getItemProps()}
        >
          <TabItemIcon>
            <IconPlaceholder />
          </TabItemIcon>
          <span>Tab 2</span>
        </TabItem>
        <TabItem
          active={activeIndex === 2}
          asProps={{ to: "?tab=3" }}
          {...getItemProps()}
        >
          <TabItemIcon>
            <IconPlaceholder />
          </TabItemIcon>
          <span>Tab 3</span>
        </TabItem>
      </TabList>
      <TabPanel active={activeIndex === 0}>
        <div>Content 1</div>
      </TabPanel>
      <TabPanel active={activeIndex === 1}>
        <div>Content 2</div>
      </TabPanel>
      <TabPanel active={activeIndex === 2}>
        <div>Content 3</div>
      </TabPanel>
    </Tabs>
  )
}

useTabs accepts the following props:

defaultIndex - The initial selected tab item index. By default, it is set to 0.
as - Html element/React component to replace the default element. Using this prop, you can use your router's link element, such as "react-router-dom"'s Link element.

It returns activeIndex and a function which generates props for Tab.

activeIndex - The active tab item index. This corresponds to the DOM order index of the tab item. By default, it is 0
getItemProps - returns onAction(event) and as. Pass onAction in tab item to set the activeIndex. If you are using your own custom onAction handler, call this onAction(event) inside your custom handle. For example,

import React from "react"
import { Link } from "@reach/router"
import {
  Tabs,
  TabList,
  TabItem,
  TabPanel,
  useTabs,
} from "@asphalt-react/tab"

export const CustomOnAction = () => {

  const { activeIndex, getItemProps } = useTabs({ defaultIndex: 0, as: Link })
  const { onAction } = getItemProps()

  const handleAction = (event) => {
    // logic to handle your custom action
    onAction(event)
  }

  return (
    <Tabs>
      <TabList>
        <TabItem
          active={activeIndex === 0}
          asProps={{ to: "?tab=1" }}
          {...getItemProps()}
          onAction={handleAction}
        >
          <span>Tab 1</span>
        </TabItem>
        <TabItem
          active={activeIndex === 1}
          asProps={{ to: "?tab=2" }}
          {...getItemProps()}
          onAction={handleAction}
        >
          <span>Tab 2</span>
        </TabItem>
      </TabList>
      <TabPanel active={activeIndex === 0}>
        <div>Content 1</div>
      </TabPanel>
      <TabPanel active={activeIndex === 1}>
        <div>Content 2</div>
      </TabPanel>
    </Tabs>
  )
}

Tabs

Wrapper for all tabs and tab panels.

Props

children

React node containing content for tabs.

type	required	default
node	false	N/A

TabList

This component acts as a wrapper around all the TabItem components

Props

children

React node containing content for TabList

type	required	default
node	false	N/A

TabItem

Add tabs using this component. By default, it renders an <a> tag but you can pass your custom element or React component using as prop. Pass all the props related to the link in asProps.

Props

children

React node to render item's content.

type	required	default
node	true	N/A

as

Html element/React component to replace the default element. Using this prop, you can use your router's link element, such as "react-router-dom"'s Link element.