How to use @zendeskgarden/container-tabs - 2 common examples
To help you get started, we’ve selected a few @zendeskgarden/container-tabs examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
zendeskgarden / react-components / packages / tabs / src / elements / Tabs.js View on Github 
function Tabs({
vertical,
children,
onChange,
selectedItem: controlledSelectedItem,
...otherProps
}) {
const [internalSelectedItem, setSelectedItem] = useState();
const firstItemRef = useRef();
const selectedItem = getControlledValue(controlledSelectedItem, internalSelectedItem);
const { getTabListProps, getTabPanelProps, getTabProps, focusedItem } = useTabs({
rtl: isRtl(otherProps),
vertical,
selectedItem,
onSelect: item => {
if (onChange) {
onChange(item);
} else {
setSelectedItem(item);
}
}
});
useEffect(() => {
/**
* In an uncontrolled state we want to always display the first tab
*/(
{ isVertical, children, onChange, selectedItem: controlledSelectedItem, theme, ...otherProps },
ref
) => {
const [internalSelectedItem, setSelectedItem] = useState();
const tabIndexRef = useRef(0);
const tabPanelIndexRef = useRef(0);
const selectedItem = getControlledValue(controlledSelectedItem, internalSelectedItem);
const tabPropGetters = useTabs({
rtl: theme!.rtl,
vertical: isVertical,
selectedItem,
defaultSelectedIndex: 0,
onSelect: item => {
if (onChange) {
onChange(item);
} else {
setSelectedItem(item);
}
}
});
const tabsContextValue = { ...tabPropGetters, tabIndexRef, tabPanelIndexRef };
return (@zendeskgarden/container-tabs
Containers relating to tabs in the Garden Design System
