{"id":21730994,"url":"https://github.com/mood-al/react-tabs-scrollable","last_synced_at":"2025-10-14T15:08:54.562Z","repository":{"id":49347704,"uuid":"482636201","full_name":"Mood-al/react-tabs-scrollable","owner":"Mood-al","description":"a react scrollable tabs component with many additional features","archived":false,"fork":false,"pushed_at":"2025-01-16T08:44:28.000Z","size":3033,"stargazers_count":37,"open_issues_count":3,"forks_count":10,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-28T22:48:25.452Z","etag":null,"topics":["nextjs","react","react-component","react-component-library","scrollable-tabs","tabs"],"latest_commit_sha":null,"homepage":"https://react-tabs-scrollable.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Mood-al.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-17T21:22:40.000Z","updated_at":"2025-09-17T05:39:59.000Z","dependencies_parsed_at":"2023-12-28T19:37:59.102Z","dependency_job_id":"bb3f1207-c857-49b9-9d98-5f7cd650c57b","html_url":"https://github.com/Mood-al/react-tabs-scrollable","commit_stats":{"total_commits":27,"total_committers":2,"mean_commits":13.5,"dds":0.03703703703703709,"last_synced_commit":"e98fe84836522fc34a1061e96bede972775cb43a"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Mood-al/react-tabs-scrollable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mood-al%2Freact-tabs-scrollable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mood-al%2Freact-tabs-scrollable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mood-al%2Freact-tabs-scrollable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mood-al%2Freact-tabs-scrollable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mood-al","download_url":"https://codeload.github.com/Mood-al/react-tabs-scrollable/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mood-al%2Freact-tabs-scrollable/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279019295,"owners_count":26086709,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","react","react-component","react-component-library","scrollable-tabs","tabs"],"created_at":"2024-11-26T04:19:07.970Z","updated_at":"2025-10-14T15:08:54.514Z","avatar_url":"https://github.com/Mood-al.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/Mooder"],"categories":[],"sub_categories":[],"readme":"# react-tabs-scrollable\n\n\u003e a simple react scrollable tabs with a lot of additional features and with fully supporting of RTL mode\n\n[![NPM](https://img.shields.io/npm/v/react-tabs-scrollable.svg)](https://www.npmjs.com/package/react-tabs-scrollable) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Install\n\n```bash\nnpm install --save react-tabs-scrollable@latest\nyarn add react-tabs-scrollable@latest\n```\n\n```bash\nnpm install --save react-tabs-scrollable@1.0.10\nyarn add react-tabs-scrollable@1.0.10\n```\n\n## Demos\n\n### \u003ca href=\"https://react-tabs-scrollable.vercel.app\" target=\"_blank\" rel=\"noopener\"\u003e\u003cspan\u003eDemos\u003c/span\u003e \u003c/a\u003e\n\n## V1 docs\n\n[V1 docs](https://github.com/Mood-al/react-tabs-scrollable/tree/v1)\n\n## Features\n\n- Typescript out of box\n- Many modes to control the behaviour of the selected tab.\n- Easy to start with it takes you less than minute to start it up!\n- Many features and so easy to customize\n- Fully support for RTL (actually the reason why I built this component is because RTL)\n- Fully accessible\n- You can control and have access to everything inside it.\n- Small sized 9.6k (gzipped: 3.9k)\n- Great to use in navigation, menus and lists or any proper use for tabs\n- Easy to style, you have the css file so you can edit it as you would like, and there are style and className props to all the elements used inside the package.\n- You have access to all refs.\n- And much more ..\n\n## What's new in V2?\n\n- I rebuild the package from scratch with typescript to avoid the unnecessary bugs and to make it more elegant and easy to use with the typescript auto-complete.\n\n  \u003e Note: this's my first time using typescript so expect many bugs with types since i was interfering a lot of types to any, and because I dont have the proper internet, I couldnt search well for them -\\_-.\n  \u003e But overall I think everything works fine!.\n\n- I deleted the unnecessary code and made it more readable and clean.\n\n- I deleted `selectedTabCoordinates` and replaced it with `getTabsBoundingClientRects` function that returns DOMRect object for the `tabsContainer` and `tab`, and it's way performant comparing to the old `selectedTabCoordinates`, it just runs when the scroll stops and when you switch to RTL.\n\n- I renamed the two action `onRightBtnClick` and `onLeftBtnClick` to `onRightNavBtnClick` and `onLeftNavBtnClick`\n\n- Instead of relying on state changes and useEffect to observe the tab click change, now I'm doing it directly via onClick.\n\n- I made the API and the enternals of the component more exposed to the developers who wants to use it (Please see the API table below to see all the new props), since I added about 15 new props including refs to all the elements inside the pacakge, and I added custom styles to style it as you want.\n\n- I added new features to make the component more compatible with my new package \u003ccode\u003e \u003ca href=\"https://www.npmjs.com/package/react-kfc-menu\" target=\"_blank\" rel=\"noopener\"\u003e\u003cspan\u003ereact-kfc-menu\u003c/span\u003e\u003c/a\u003e\u003c/code\u003e such as \u003ccode\u003emode\u003c/code\u003e prop that controls the behavior of the selected tab scroll, now you can change the whole behavior of it with the new 4 modes I've added to it.\n\n- I added `\u003cTabScreen /\u003e` component if you want to use tab panels with the tabs.\n\n\u003e I'm planning to add Swipeable component to make the TabScreens more interactive with drag and touch events on both, Desktop and mobile.\n\nPlease If you faced any bugs feel free to open an issue.\n\n## Usage\n\n### #Simple Tabs\n\n```jsx\nimport React from \"react\";\nimport { Tabs, Tab } from \"react-tabs-scrollable\";\nimport \"react-tabs-scrollable/dist/rts.css\";\n\nconst SimpleTabs = () =\u003e {\n  // define state with initial value to let the tabs start with that value\n  const [activeTab, setActiveTab] = React.useState(1);\n\n  // define a onClick function to bind the value on tab click\n  const onTabClick = (e, index) =\u003e {\n    console.log(e);\n    setActiveTab(index);\n  };\n\n  return (\n    \u003c\u003e\n      \u003cTabs activeTab={activeTab} onTabClick={onTabClick}\u003e\n        {/* generating an array to loop through it  */}\n        {[...Array(20).keys()].map((item) =\u003e (\n          \u003cTab key={item}\u003eTab {item}\u003c/Tab\u003e\n        ))}\n      \u003c/Tabs\u003e\n    \u003c/\u003e\n  );\n};\n\nexport default SimpleTabs;\n```\n\n## #Tabs with TabScreen\n\n```jsx\nimport React from \"react\";\nimport { Tabs, Tab } from \"react-tabs-scrollable\";\nimport \"react-tabs-scrollable/dist/rts.css\";\n\nconst SimpleTabs = () =\u003e {\n  // define state with initial value to let the tabs start with that value\n  const [activeTab, setActiveTab] = React.useState(1);\n\n  // define a onClick function to bind the value on tab click\n  const onTabClick = (e, index) =\u003e {\n    console.log(e);\n    setActiveTab(index);\n  };\n  const tabsArray = [...Array(20).keys()];\n  return (\n    \u003c\u003e\n      \u003cTabs activeTab={activeTab} onTabClick={onTabClick}\u003e\n        {/* generating an array to loop through it  */}\n        {tabsArray.map((item) =\u003e (\n          \u003cTab key={item}\u003eTab {item}\u003c/Tab\u003e\n        ))}\n      \u003c/Tabs\u003e\n\n      {tabsArray.map((item) =\u003e (\n        \u003cTabScreen\n          key={item}\n          activeTab={activeTab}\n          index={item}\n          // You can add animation with adding a custom class\n          className=\"some-animation-class\"\n        \u003e\n          TabScreen {item}\n        \u003c/TabScreen\u003e\n      ))}\n    \u003c/\u003e\n  );\n};\n\nexport default SimpleTabs;\n```\n\n### #Full example with all features\n\n```jsx\n\u003cTabs\n  // the selected tab state which must be passed to the commponent\n  activeTab={activeTab}\n  // tab on click function\n  // it has two props\n  // first one is event object\n  // second one is the index of the selected tab\n  onTabClick={(val) =\u003e console.log(val)}\n  // this prop returns a group of events to control the tabs such as onLeftNavBtnClick , onRightNavBtnClick to control the tabs\n  // you should pass here a ref to get the required functionality\n  action={tabRef}\n  // sets if the direction of the page is RTL or not\n  // default false\n  isRTL={false}\n  // sets if the tabs reached the end point of the tab container\n  // function\n  didReachEnd={(val) =\u003e console.log(val)}\n  // sets if the tabs reached the start point container\n  // function\n  didReachStart={(val) =\u003e console.log(val)}\n  // sets how many tabs you want to scroll on every move\n  // default 3 tabs on each navigation button click\n  tabsScrollAmount={3}\n  // sets the general animation duration when you click on the navigation buttons and when you click out the tabs view\n  // this option will disable navBtnCLickAnimationDuration and selectedAnimationDuration\n  // default 300s\n  animationDuration={300}\n  // sets the animation of the scroll when you click on the navigation buttons\n  // note : this will overwirte the animationDuration value\n  // default 300s\n  navBtnCLickAnimationDuration={300}\n  // sets the animation of the scroll when you click on a tab that is out of the view\n  // note : this will overwirte the animationDuration value\n  // default 300s\n  selectedAnimationDuration={300}\n  // sets the right navitgation vutton icon\n  // default feather arrow-right svg icon\n  // you can pass jsx here or just a string\n  rightBtnIcon={\"\u003e\"}\n  // sets the left navitgation button icon\n  // default feather arrow-left svg icon\n  // you can pass jsx here or just a string\n  leftBtnIcon={\"\u003c\"}\n  //hides the navigantion button\n  // default false\n  hideNavBtns={false}\n  // hides the navigation buttons on mobile devices\n  // default true\n  hideNavBtnsOnMobile={true}\n  // shows the scroll of the tabs\n  // default false\n  showTabsScroll={false}\n  // returns the DOMRect object of the selected tab and the tabs container\n  getTabsBoundingClientRects={(val) =\u003e console.log(val)}\n  // A react ref that can be used to control the tabs programmatically\n  //   Check the API section to understand more\n  action={ref}\n  //   You can change the behaviour of the selected tab scroll by changing the option of it, whether to move it to center, start, end or to center but if the selected tab is in the view.\n  //   Check the API section to understand more or you can play with it to understand the idea\n  mode=\"scrollSelectedToCenterFromView\"\n  //   changes the underline HTML element\n  navBtnAs=\"div\"\n  //   These props sets the className of their elements\n  tabsContainerClassName=\"\"\n  tabsUpperContainerClassName=\"\"\n  tabsContainerClassName=\"\"\n  leftNavBtnClassName=\"\"\n  rightNavBtnClassName=\"\"\n  navBtnClassName=\"\"\n  navBtnContainerClassName=\"\"\n  //  Sets the style of these element\n  navBtnStyle={{}}\n  tabsContainerStyle={{}}\n  tabsUpperContainerStyle={{}}\n  //    You can get the ref of these elements\n  tabsContainerRef={ref}\n  tabRef={ref}\n  leftNavBtnRef={ref}\n  rightNavBtnRef={ref}\n\u003e\n  \u003cTab\u003eitem \u003c/Tab\u003e\n  {[...Array(20).keys()].map((tab) =\u003e (\n    \u003cTab key={tab}\u003eTab {tab}\u003c/Tab\u003e\n  ))}\n\u003c/Tabs\u003e\n```\n\n## API\n\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eName\u003c/td\u003e\n        \u003ctd\u003eDefault\u003c/td\u003e\n        \u003ctd\u003eType\u003c/td\u003e\n        \u003ctd\u003eDescription\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003eactiveTab*\u003c/code\u003e \u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003einteger\u003c/td\u003e\n        \u003ctd\u003ethe selected tab value which must be passed to the commponent\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003eonTabClick*\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003efunction\u003c/td\u003e\n        \u003ctd\u003e \u003ccode\u003efunction(event, value) =\u0026gt; void\u003c/code\u003e callback function fires on tab click. It has two props, the first on is the event object the second on is the selected tab value\u003c/td\u003e\n    \u003c/tr\u003e\n     \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003emode\u003c/code\u003e \u003c/td\u003e\n        \u003ctd\u003escrollSelectedToStart\u003c/td\u003e\n        \u003ctd\u003estring\u003c/td\u003e\n        \u003ctd\u003eit controls the behavoiur of the selected tab whether to move it to start | center | end | center if the tab is in the view.\n        it contains 3 modes:\n\n  \u003cul\u003e\n    \u003cli\u003e\u003ccode\u003escrollSelectedToCenter\u003c/code\u003e: scrolls the selected tab to the center of view.\u003c/li\u003e\n    \u003cli\u003e\u003ccode\u003escrollSelectedToEnd\u003c/code\u003e: scrolls the selected tab to the end of view\u003c/li\u003e\n      \u003cli\u003e\u003ccode\u003escrollSelectedToCenterFromView\u003c/code\u003e: scrolls the selected tab to the center of view but even if the selected tab was already in the view.\n      if you clicked on a tab in the center of view it wont scroll or move, but if you click on any tab on any side (right of the center or left of center tab) it will scroll to the left or right,depending on which side of the view you are clicking.\n      see the demos to understand more!!\n     \u003cdiv\u003e\n      \u003ccode\u003eI added this option just to make react-tabs-scrollable more compatible with react-kfc-menu\u003c/code\u003e\n     \u003c/div\u003e\n       \u003c/li\u003e\n  \u003c/ul\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003eaction\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003eref\u003c/td\u003e\n        \u003ctd\u003ereact ref fires when the component mounts. It's useful if you want to control some functionalities programmatically. It supports 4 function : \u003cbr /\u003e\n                \u003cdiv\u003e\u003ccode\u003eonLeftNavBtnClick ,onRightNavBtnClick, goToStart, goToEnd\u003c/code\u003e\u003c/div\u003e\n                \u003cbr /\u003e  \u003cdiv\u003e\u003ccode\u003eonLeftNavBtnClick\u003c/code\u003e : to control the left btn click and use your own navigation button. you can call it by so  \u003ccode\u003eref.current.onLeftNavBtnClick()\u003c/code\u003e \u003c/div\u003e \n        \u003cbr/\u003e\n       \u003cdiv\u003e \u003ccode\u003eonRightNavBtnClick\u003c/code\u003e : to control the right btn click and use your own navigation button. you can call it by so  \u003ccode\u003eref.current.onRightNavBtnClick()\u003c/code\u003e \n         \u003cbr/\u003e\n        \u003c/div\u003e \n        \u003cbr/\u003e\n       \u003cdiv\u003e \u003ccode\u003egoToStart\u003c/code\u003e : to control the tabs to go to the start of the tabs container. you can call it by so  \u003ccode\u003eref.current.goToStart()\u003c/code\u003e \u003c/div\u003e \u003cbr /\u003e \n       \u003cdiv\u003e \u003ccode\u003egoToEnd\u003c/code\u003e : to control the tabs to go to the end of the tabs container. you can call it by so  \u003ccode\u003eref.current.goToEnd()\u003c/code\u003e \u003c/div\u003e \n        \u003cspan\u003e\u003c/span\u003e\n     \u003c/td\u003e\n    \u003c/tr\u003e\n        \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003eisRTL\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003efalse\u003c/td\u003e\n        \u003ctd\u003eboolean\u003c/td\u003e\n        \u003ctd\u003e sets if the direction of the tabs is RTL or not\u003c/td\u003e\n    \u003c/tr\u003e\n      \u003c/tr\u003e\n        \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003edidReachEnd\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003efunction\u003c/td\u003e\n        \u003ctd\u003e sets if the tabs reached the end point of the container \u003ccode\u003edidReachEnd={(val) =\u003e console.log(val)}\u003c/code\u003e  \u003c/td\u003e\n    \u003c/tr\u003e\n       \u003c/tr\u003e\n      \u003c/tr\u003e\n        \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003edidReachStart\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003efunction\u003c/td\u003e\n        \u003ctd\u003e sets if the tabs reached the start point of the container \u003ccode\u003edidReachStart={(val) =\u003e console.log(val)}\u003c/code\u003e  \u003c/td\u003e\n    \u003c/tr\u003e\n     \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003etabsScrollAmount\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e3\u003c/td\u003e\n        \u003ctd\u003estring | integer\u003c/td\u003e\n        \u003ctd\u003e sets how many tabs you want to scroll on every move \u003ccode\u003e tabsScrollAmount={3}\u003c/code\u003e  \u003c/td\u003e\n    \u003c/tr\u003e\n     \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003eanimationDuration\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e300s\u003c/td\u003e\n        \u003ctd\u003e integer\u003c/td\u003e\n        \u003ctd\u003e  sets the animation duration of the scroll when you click on the navigation buttons\n               note : this will overwirte the animationDuration value \u003ccode\u003e animationDuration={300}\u003c/code\u003e  \u003c/td\u003e\n    \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003enavBtnCLickAnimationDuration\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e300s\u003c/td\u003e\n        \u003ctd\u003e integer\u003c/td\u003e\n        \u003ctd\u003e  sets the animation of the scroll when you click on the navigation buttons\n  note : this will overwirte the animationDuration value \u003ccode\u003e  navBtnCLickAnimationDuration={300}\u003c/code\u003e  \u003c/td\u003e\n    \u003c/tr\u003e\n       \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003eselectedAnimationDuration\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e300s\u003c/td\u003e\n        \u003ctd\u003e integer\u003c/td\u003e\n        \u003ctd\u003e    sets the animation of the scroll when you click on a tab that is out of the view\n  note : this will overwirte the animationDuration value \u003ccode\u003e  selectedAnimationDuration={300}\u003c/code\u003e  \u003c/td\u003e\n    \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003erightBtnIcon\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003efeather arrow-right svg icon\u003c/td\u003e\n        \u003ctd\u003e string | jsx \u003c/td\u003e\n        \u003ctd\u003e   sets the right navitgation button icon \u003ccode\u003e  rightBtnIcon={'\u003e'}\u003c/code\u003e  \u003c/td\u003e\n    \u003c/tr\u003e\n     \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003eleftBtnIcon\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003efeather arrow-left svg icon\u003c/td\u003e\n        \u003ctd\u003e string | jsx \u003c/td\u003e\n        \u003ctd\u003e   sets the left navitgation button icon \u003ccode\u003e  leftBtnIcon={'\u003e'}\u003c/code\u003e  \u003c/td\u003e\n    \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003ehideNavBtns\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003efalse\u003c/td\u003e\n        \u003ctd\u003e boolean\u003c/td\u003e\n        \u003ctd\u003e  hides the navigantion button \u003ccode\u003e  hideNavBtns={false}\u003c/code\u003e  \u003c/td\u003e\n    \u003c/tr\u003e\n       \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003ehideNavBtnsOnMobile\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003etrue\u003c/td\u003e\n        \u003ctd\u003e boolean\u003c/td\u003e\n        \u003ctd\u003e  hides the navigation buttons on mobile devices  \u003c/td\u003e\n    \u003c/tr\u003e\n        \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003eshowTabsScroll\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003efalse\u003c/td\u003e\n        \u003ctd\u003e boolean\u003c/td\u003e\n        \u003ctd\u003e  shows the scroll of the tabsn  \u003c/td\u003e\n    \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003egetTabsBoundingClientRects\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e function\u003c/td\u003e\n        \u003ctd\u003ereturns a callback with the DOMRects object of the selected tab and the tabsContainer. \u003c/td\u003e\n    \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003etabsContainerRef\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e ref\u003c/td\u003e\n        \u003ctd\u003ethe tabs container ref object\u003c/td\u003e\n    \u003c/tr\u003e\n     \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003etabRef\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003eref\u003c/td\u003e\n        \u003ctd\u003ethe tabs ref object and it returns an array of all the tab ref\u003c/td\u003e\n    \u003c/tr\u003e\n         \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003eleftNavBtnRef\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003eref\u003c/td\u003e\n        \u003ctd\u003esets the left navigation btn's ref\u003c/td\u003e\n    \u003c/tr\u003e\n        \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003erightNavBtnRef\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003eref\u003c/td\u003e\n        \u003ctd\u003esets the right navigation btn's ref\u003c/td\u003e\n    \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003enavBtnStyle\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003eobject\u003c/td\u003e\n        \u003ctd\u003esets the navigation btns' style object\u003c/td\u003e\n    \u003c/tr\u003e\n       \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003etabsContainerStyle\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003eobject\u003c/td\u003e\n        \u003ctd\u003eSets tabs container's style object\u003c/td\u003e\n    \u003c/tr\u003e\n        \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003etabsUpperContainerStyle\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003eobject\u003c/td\u003e\n        \u003ctd\u003eSets the tabs upper container's style object\u003c/td\u003e\n    \u003c/tr\u003e\n        \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003eleftNavBtnClassName\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003estring\u003c/td\u003e\n        \u003ctd\u003eSets the left navigation button's className\u003c/td\u003e\n    \u003c/tr\u003e\n       \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003erightNavBtnClassName\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003estring\u003c/td\u003e\n        \u003ctd\u003eSets the right navigation button's className\u003c/td\u003e\n    \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003enavBtnClassName\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003estring\u003c/td\u003e\n        \u003ctd\u003eSets the navigation buttons' className\u003c/td\u003e\n    \u003c/tr\u003e\n     \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003enavBtnContainerClassName\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003estring\u003c/td\u003e\n        \u003ctd\u003eSets the navigation buttons' container className\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003etabsUpperContainerClassName\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003estring\u003c/td\u003e\n        \u003ctd\u003eSets the upper tabs container's className\u003c/td\u003e\n    \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003etabsContainerClassName\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003estring\u003c/td\u003e\n        \u003ctd\u003eSets the tabs container's className\u003c/td\u003e\n    \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003enavBtnAs\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003ebutton\u003c/td\u003e\n        \u003ctd\u003estring\u003c/td\u003e\n        \u003ctd\u003eSets the HTML element of the navigation buttons\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n## Tab\n\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eName\u003c/td\u003e\n        \u003ctd\u003eDefault\u003c/td\u003e\n        \u003ctd\u003eType\u003c/td\u003e\n        \u003ctd\u003eDescription\u003c/td\u003e\n    \u003c/tr\u003e\n     \u003c/tr\u003e\n        \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003etabAs\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003ebutton\u003c/td\u003e\n        \u003ctd\u003estring\u003c/td\u003e\n        \u003ctd\u003e  You can change the HTML element of the \n        \u003ccode\u003e\n            Tab\n        \u003c/code\u003e\n        \u003cdiv\u003eNote: Changing the underline element will affect on the accessiblity of the tab\u003c/div\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n     \u003c/tr\u003e\n        \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003estyle\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003eobject\u003c/td\u003e\n        \u003ctd\u003e \n            sets Tab's style object\n        \u003c/td\u003e\n    \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003eclassName\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ccode\u003e-\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003estring\u003c/td\u003e\n        \u003ctd\u003eyou can pass a custom className to the \u003ccode\u003eTab\u003c/code\u003e component\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n## TabScreen\n\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eName\u003c/td\u003e\n        \u003ctd\u003eDefault\u003c/td\u003e\n        \u003ctd\u003eType\u003c/td\u003e\n        \u003ctd\u003eDescription\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003eactiveTab*\u003c/code\u003e \u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003einteger\u003c/td\u003e\n        \u003ctd\u003ethe selected tab value which must be passed to the commponent\u003c/td\u003e\n    \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003eindex*\u003c/code\u003e \u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003einteger | string\u003c/td\u003e\n        \u003ctd\u003ethe index of the tabscreen which must match the activeTab integer\u003c/td\u003e\n    \u003c/tr\u003e\n        \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003eas\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003edov\u003c/td\u003e\n        \u003ctd\u003estring\u003c/td\u003e\n        \u003ctd\u003e\n            You can change the HTML element of the  \u003ccode\u003e\n                TabScreen\n            \u003c/code\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n     \u003c/tr\u003e\n        \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003estyle\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003eobject\u003c/td\u003e\n        \u003ctd\u003e \n            sets Tab's style object\n        \u003c/td\u003e\n    \u003c/tr\u003e\n      \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003eclassName\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ccode\u003e-\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003estring\u003c/td\u003e\n        \u003ctd\u003eyou can pass a custom className to the \u003ccode\u003eTabScreen\u003c/code\u003e component\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003c/table\u003e\n\n\u003cbr /\u003e\n\n\u003e If you liked this project don't forget to see my other projects on NPM and github\n\n## Contrubite\n\nShow your support by giving a ⭐. Any feature requests are welcome!\nAnyone is welcomed to contribute in this project.\n\n## Financial Contributions\n\n\u003ca href=\"https://www.buymeacoffee.com/Mooder\" target=\"_blank\"\u003e\u003cimg src=\"https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png\" alt=\"Buy Me A Coffee\" style=\"height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;\" \u003e\u003c/a\u003e\n\nBuying me coffee will help me sustain the updates and work on new project for the open-source\n\n## Organizations\n\nSupport this project with your organization / company or individual.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmood-al%2Freact-tabs-scrollable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmood-al%2Freact-tabs-scrollable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmood-al%2Freact-tabs-scrollable/lists"}