Components
Structure
Tabs

Tabs

Tabs allow users to navigate easily between views within the same context.

Import statement

import { Tabs, Tab, useTabs } from "@wfp/react"

Usage

Expand code

Editable Example

import { Tabs, Tab } from "@wfp/react";

<div className="tabs-warapper">
  <Tabs>
    <Tab label="Label 1" selected>
      <div className="some-content">
        Content for first tab.
      </div>
    </Tab>
    <Tab label="Label 2">
      <div className="some-content">
        Content for second tab.
      </div>
    </Tab>
    <Tab label="Label 3">
      <div className="some-content">
        Content for third tab.
      </div>
    </Tab>
    <Tab disabled label="Label 4 disabled">
      <div className="some-content">
        Content for fourth tab.
      </div>
    </Tab>
  </Tabs>
</div>;

Tabs With Content Margin Top

Expand code

Editable Example

import { Tabs, Tab } from "@wfp/react";

<div className="tabs-warapper">
  <Tabs tabsContentMarginTop="1rem">
    <Tab label="Label 1" selected>
      <div className="some-content">
        Content for first tab.
      </div>
    </Tab>
    <Tab label="Label 2">
      <div className="some-content">
        Content for second tab.
      </div>
    </Tab>
    <Tab label="Label 3">
      <div className="some-content">
        Content for third tab.
      </div>
    </Tab>
    <Tab disabled label="Label 4 disabled">
      <div className="some-content">
        Content for fourth tab.
      </div>
    </Tab>
  </Tabs>
</div>;

Use a custom Tab Link Component

A custom renderAnchor replaces the Link inside the <Tab/> Component

const el = (props) => {
  return <a href={props.href}>{props.label}</a>;
};
Expand code

Editable Example

import { Tabs, Tab } from "@wfp/react";

<Tabs>
  <Tab
    selected
    label="Tab label 4"
    href="http://www.fr.wfp.org"
    renderAnchor={(props) => {
      return <a href={props.href}>{props.label}</a>;
    }}
  />
</Tabs>;

A custom renderListElement replaces the whole tab element inside the <Tab/> Component, which is especially relevant if you use <Tabs/> with react-router, etc.

const listEl = (props) => (
  <NavLink {...props} activeClassName="wfp--tabs__nav-item--selected">
    {props.label}
  </NavLink>
);
<Tab
  label="Tab label 4"
  href="http://www.fr.wfp.org"
  renderListElement={listEl}
/>

Use with react-router

Write a custom component to use Tabs with different route handlers like react-router.

import { Link } from "react-router-dom";


const listElReactRouter = ({ anchor, className, to, exact, match }) => (
  <Route
    to={to}
    exact={exact}
    children={({ match }) => (
      <li
        className={
          match ? className + " wfp--tabs__nav-item--selected" : className
        }
      >
        <Link className={anchor.className} to={to}>
          {anchor.label}
        </Link>
      </li>
    )}
  />
);


<Tabs customTabContent={true}>
  <Tab
    label="React-Router Example"
    to="/path"
    renderListElement={listElReactRouter}
  />
</Tabs>;

useTab hook

The useTab component can be used to build your own tab component which is useful when using a router.

import { useTab } from "@wfp/react";


const { anchorProps, liProps, selectedClasses } = useTab(props);

Example of using useTab with Next.js (App Router)

import { useTab } from "@wfp/react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import React from "react";


/* 
Props accepted by useTab
  className,
  disabled,
  handleTabClick,
  handleTabAnchorFocus,
  handleTabKeyDown,
  href,
  index = 0,
  label,
  selected,
  tabIndex,
  onClick,
  onKeyDown
*/


export default function NextTab(props) {
  const { children, href } = props;
  const { anchorProps, liProps, selectedClasses } = useTab(props);


  const pathName = usePathname();
  const isActive = pathName === href;


  return (
    <li {...liProps} className={isActive ? selectedClasses : liProps.className}>
      <Link {...anchorProps} href={href}>
        {children}
      </Link>
    </li>
  );
}

References

On this page