Closable, draggable tabs?

[DmitrySoshnikov]

The very basic functionality -- to close a tab -- is missing, and would be nice to have. In addition, draggable functionality also would be useful.

For now I was able to just create a custom "close" button in each tab, and it works, but worth having closable={boolean}, and onClose={index => ...}

[darrylsepeda]

+1

[joepvl]

For now, closing tabs is something we see as an advanced use case, and we'd expect people to implement this themselves using the component's controlled mode.

Same thing for draggability, really, but that is admittedly more of a hassle to achieve. At the very least you would need to wrap tabs — and probably the tab list — within an HOC that add dragging behaviour, which would require use of the tabsRole static class property — see https://github.com/reactjs/react-tabs#custom-components.

Still, AFAIK neither of these functionalities are part of the roadmap at the moment. @danez any thoughts on this?

[user24]

I know this is old but I wanted to know how to close a tab i.e. have no tabs open at all, and found that this works:

this.setState({ tabIndex: -1 });

Not sure if that's the correct way to do it but wanted to note it here for future people trying to do the same. Would be nice to have this mentioned in the docs at least.

[anjalikk14]

+1

react-tabs is a great component for static pages, but for many people dragging, closing, and adding tabs is a natural extension of the way people interact with web browsers every day -- no surprise they expect the same behavior in tabs that appear in web apps!

[Zertz]

While I love react-tabs, I've found the headless approach using hooks in @bumaga/tabs to be better suited for advanced use cases such as drag and drop.

Edit: I have since made and switched to react-headless-tabs with a slightly different approach that, I believe, behaves as you would expect tabs to behave! I even built examples with closable tabs, drag and drop, and more.