Using strings for tab pane index.

[pavinduLakshan]

Feature Request

Problem description

When using the React Semantic UI tabs component, using the tab position as the index is sometimes unreliable as the new tabs are added to the tab group, the current position of the exisiting tabs are changed.

When the tab index changes, all the URLs defined across our application (eg: example.com/page?tab=2) are rendered broken i.e not navigating to the intended tab.

Therefore, it would be better if we can define a unique string value as the index for each tab pane, at the time of rendering the tab component. Then, no matter how the tab order is changed, we can refer to tabs as example.com/page?tab=general and make sure that the references to the tab pane remain as it is.

Proposed solution

A clear and concise description of what you want to happen. Add any considered drawbacks.

const [activeTabIndex, setActiveTabIndex] = useState<string>("general");

<Tab
    activeIndex={ activeTabIndex }
    defaultActiveIndex={ defaultActiveIndex }
    onTabChange={ handleTabChange }
    panes={ [
        {
          menuItem: <Menu.Item>General</Menu.Item>,
          render: () => <div>Tab General</div>
          index: "general"
        },
        {
          menuItem: <Menu.Item>Protocol</Menu.Item>,
          render: () => <div>Tab Protocol</div>
          index: "protocol"
        },
    ] }
/>

MVP

[welcome]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.