react-tabs-scrollable
Version:
a simple react scrollable tabs with a lot of additional features and with fully supporting of RTL mode
44 lines (43 loc) • 1.54 kB
TypeScript
import { default as React } from 'react';
type Mode = "scrollSelectedToCenterFromView" | "scrollSelectedToCenter" | "scrollSelectedToEnd";
interface TabsProps {
children: React.ReactNode;
activeTab: number;
onTabClick: (e: React.BaseSyntheticEvent, id: number) => void;
animationDuration?: number;
navBtnCLickAnimationDuration?: number;
selectedAnimationDuration?: number;
isRTL?: boolean;
didReachEnd?: Function;
didReachStart?: Function;
hideNavBtnsOnMobile?: boolean;
hideNavBtns?: boolean;
tabsScrollAmount?: number;
mode?: Mode;
tabsContainerRef?: React.RefObject<HTMLDivElement> | any;
tabRef?: React.RefObject<HTMLDivElement> | any;
leftNavBtnRef?: React.Ref<HTMLButtonElement> | any;
rightNavBtnRef?: React.Ref<HTMLButtonElement> | any;
navBtnStyle?: object;
tabsContainerStyle?: object;
tabsUpperContainerStyle?: object;
leftNavBtnClassName?: string;
rightNavBtnClassName?: string;
navBtnClassName?: string;
navBtnContainerClassName?: string;
tabsUpperContainerClassName?: string;
tabsContainerClassName?: string;
showTabsScroll?: boolean;
navBtnAs?: any;
getTabsBoundingClientRects?: Function;
action?: React.Ref<{
onLeftNavBtnClick: () => void;
onRightNavBtnClick: () => void;
goToStart: () => void;
goToEnd: () => void;
}>;
rightBtnIcon?: string | JSX.Element;
leftBtnIcon?: string | JSX.Element;
}
declare const Tabs: React.FC<TabsProps>;
export default Tabs;