[Tabs] Add selected prop for easy integration with routing libraries

[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

[aarongarciah]

Hey @itayperry, thanks for contributing. Can you provide the API you envision to support your use case? Take into account that Material UI components can't directly integrate with libraries like React Router or TanStack Router because we can't have access to the state coming from those libraries out of the box. There will be always a small amount of glue code that you'll need to connect these libs with Material UI.

Have you taken a look at this guide? https://mui.com/material-ui/integrations/routing/#tabs

I just create this naive example on how you might use useLocation or other routing libs APIs to get the current tab to control the value passed to the Tabs components: https://codesandbox.io/p/sandbox/keen-fire-xh4755?file=/src/Demo.tsx:11,11 In the example, the third tab uses the component to render the tab as a NavLink from React Router to showcase how you might leverage it to have more control over the rendering of a particular tab.