Adding a "selected" prop for Tab component to enable easy integration with routing libraries like React Router / TanStack Router

[itayperry]

Summary

Hi,
First of all, I do not wish to waste the maintainers' time, I just think this matter will be meaningful for the front-end community :)

The subject at hand is allowing the tabs to be used with navigation in libraries like React Router - making each tab know if it's active using the routes "isActive" prop.

I will start by showing an example of a navigation with different MUI components -
<ToggleButtonGroup/>
combined with
<ToggleButton/>

First, this is a part of an example router - a route that has 3 sub-routes:

.
.
.
{
    path: "incidents",
    element: <>something... <Outlet /></>,
    errorElement: <>some error</>,
    children: [
        { 
            index: true, 
            element: <Navigate replace to="main-events" />, },
        {
            path: "main-events",
            element: <SimulationIncidentsCards />,
        },
        {   path: "all-events", element: <AllEventsTable /> },
        {
             path: "map-display",
             errorElement: "some-error",
             element: <SimulationMap />,
         },
    ],
},
.
.
.

This is a component that toggles between the routes,
each is aware of the isActive prop and knows whether it is selected or not.

import {
  ToggleButton,
  ToggleButtonGroup,
} from "@mui/material";
import { NavLink } from "react-router-dom";


type IncidentDisplay = {
  name: string;
  to: string;
  icon: JSX.Element;
};
const simulationDataPageSubRoutes: IncidentDisplay[] = [
  {
    name: "Main-Events",
    to: "./main-events",
    icon: <GridViewOutlinedIcon fontSize="small" />,
  },
  {
    name: "All-Events",
    to: "./all-events",
    icon: <TableViewOutlinedIcon fontSize="small" />,
  },
  {
    name: "Events-Map",
    to: "./map-display",
    icon: <MapTwoToneIcon fontSize="small" />,
  },
] as const;

function HeaderToggler() {
  return (
    <ToggleButtonGroup
      color="primary"
      // value={alignment}
      exclusive
      // onChange={handleChange}
      aria-label="Platform"
      size="small"
    >
      {simulationDataPageSubRoutes.map((subRoute) => {
        return (
          <NavLink to={subRoute.to} style={{ all: "unset" }} key={subRoute.to}>
            {({ isActive, isPending }) => (
              <ToggleButton
                size="small"
                aria-label={subRoute.name}
                selected={isActive}
                disabled={isPending}
              >
                {subRoute.icon}
              </ToggleButton>
            )}
          </NavLink>
        );
      })}
    </ToggleButtonGroup>
  );
}

This code is extremely comfortable and easy, but unfortunately cannot be implemented with Tabs/Tab.
A tab can never know whether it is selected or not, and it depends on its parent, the <Tabs> component.

Examples

No response

Motivation

I was just thinking it will be really easy and fun to allow tabs to do what button-toggle(rs) already do..

Plus, many SPA React projects are written with React-Router / TanStack-Router, and I truly believe this will be extremely helpful and widely used in the community 🎄

Search keywords: tab