How to set the tab container's width to be the width of the widest tab?
ziyuang opened this issue · comments
This doesn't work as the container div
's width is too small to hold the wide tab.
import { useRef, useEffect, useState } from "react";
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import "react-tabs/style/react-tabs.css";
export const MyTab = () => {
const containerRef = useRef<HTMLDivElement>(null);
const [maxTabWidth, setMaxTabWidth] = useState(0);
useEffect(() => {
if (containerRef.current) {
let maxWidth = 0;
const tabElements =
containerRef.current.querySelectorAll<HTMLElement>(".react-tabs__tab");
tabElements.forEach((tab) => {
const width = tab.offsetWidth;
if (width > maxWidth) {
maxWidth = width;
}
});
setMaxTabWidth(maxWidth);
}
}, []);
return (
<div
ref={containerRef}
style={{ width: maxTabWidth }}
>
<Tabs>
<TabList>
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
</TabList>
<TabPanel>
Narrow tab
</TabPanel>
<TabPanel>
{Array(100).join("a")}
</TabPanel>
</Tabs>
</div>
);
}
Looks like the class is .react-tabs__tab-panel
. Although it doesn't fix my real case it fixes the simplified version in the sandbox.