react-tabs-scrollable

a simple react scrollable tabs with a lot of additional features and with fully supporting of RTL mode

Install

1npm install --save react-tabs-scrollable@latest
2yarn add react-tabs-scrollable@latest

1npm install --save react-tabs-scrollable@1.0.10
2yarn add react-tabs-scrollable@1.0.10

Demos

Demos

V1 docs

V1 docs

Features

• Typescript out of box
• Many modes to control the behaviour of the selected tab.
• Easy to start with it takes you less than minute to start it up!
• Many features and so easy to customize
• Fully support for RTL (actually the reason why I built this component is because RTL)
• Fully accessible
• You can control and have access to everything inside it.
• Small sized 9.6k (gzipped: 3.9k)
• Great to use in navigation, menus and lists or any proper use for tabs
• 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.
• You have access to all refs.
• And much more ..

What's new in V2?

• 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.

  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 -_-. But overall I think everything works fine!.

• I deleted the unnecessary code and made it more readable and clean.

• 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.

• I renamed the two action onRightBtnClick and onLeftBtnClick to onRightNavBtnClick and onLeftNavBtnClick

• 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.

• I added new features to make the component more compatible with my new package react-kfc-menu such as mode 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.

• I added <TabScreen /> component if you want to use tab panels with the tabs.

I'm planning to add Swipeable component to make the TabScreens more interactive with drag and touch events on both, Desktop and mobile.

Please If you faced any bugs feel free to open an issue.

Usage

#Simple Tabs

1import React from "react";
2import { Tabs, Tab } from "react-tabs-scrollable";
3import "react-tabs-scrollable/dist/rts.css";
4
5const SimpleTabs = () => {
6  // define state with initial value to let the tabs start with that value
7  const [activeTab, setActiveTab] = React.useState(1);
8
9  // define a onClick function to bind the value on tab click
10  const onTabClick = (e, index) => {
11    console.log(e);
12    setActiveTab(index);
13  };
14
15  return (
16    <>
17      <Tabs activeTab={activeTab} onTabClick={onTabClick}>
18        {/* generating an array to loop through it  */}
19        {[...Array(20).keys()].map((item) => (
20          <Tab key={item}>Tab {item}</Tab>
21        ))}
22      </Tabs>
23    </>
24  );
25};
26
27export default SimpleTabs;

#Tabs with TabScreen

1import React from "react";
2import { Tabs, Tab } from "react-tabs-scrollable";
3import "react-tabs-scrollable/dist/rts.css";
4
5const SimpleTabs = () => {
6  // define state with initial value to let the tabs start with that value
7  const [activeTab, setActiveTab] = React.useState(1);
8
9  // define a onClick function to bind the value on tab click
10  const onTabClick = (e, index) => {
11    console.log(e);
12    setActiveTab(index);
13  };
14  const tabsArray = [...Array(20).keys()];
15  return (
16    <>
17      <Tabs activeTab={activeTab} onTabClick={onTabClick}>
18        {/* generating an array to loop through it  */}
19        {tabsArray.map((item) => (
20          <Tab key={item}>Tab {item}</Tab>
21        ))}
22      </Tabs>
23
24      {tabsArray.map((item) => (
25        <TabScreen
26          key={item}
27          activeTab={activeTab}
28          index={item}
29          // You can add animation with adding a custom class
30          className="some-animation-class"
31        >
32          TabScreen {item}
33        </TabScreen>
34      ))}
35    </>
36  );
37};
38
39export default SimpleTabs;

#Full example with all features

1<Tabs
2  // the selected tab state which must be passed to the commponent
3  activeTab={activeTab}
4  // tab on click function
5  // it has two props
6  // first one is event object
7  // second one is the index of the selected tab
8  onTabClick={(val) => console.log(val)}
9  // this prop returns a group of events to control the tabs such as onLeftNavBtnClick , onRightNavBtnClick to control the tabs
10  // you should pass here a ref to get the required functionality
11  action={tabRef}
12  // sets if the direction of the page is RTL or not
13  // default false
14  isRTL={false}
15  // sets if the tabs reached the end point of the tab container
16  // function
17  didReachEnd={(val) => console.log(val)}
18  // sets if the tabs reached the start point container
19  // function
20  didReachStart={(val) => console.log(val)}
21  // sets how many tabs you want to scroll on every move
22  // default 3 tabs on each navigation button click
23  tabsScrollAmount={3}
24  // sets the general animation duration when you click on the navigation buttons and when you click out the tabs view
25  // this option will disable navBtnCLickAnimationDuration and selectedAnimationDuration
26  // default 300s
27  animationDuration={300}
28  // sets the animation of the scroll when you click on the navigation buttons
29  // note : this will overwirte the animationDuration value
30  // default 300s
31  navBtnCLickAnimationDuration={300}
32  // sets the animation of the scroll when you click on a tab that is out of the view
33  // note : this will overwirte the animationDuration value
34  // default 300s
35  selectedAnimationDuration={300}
36  // sets the right navitgation vutton icon
37  // default feather arrow-right svg icon
38  // you can pass jsx here or just a string
39  rightBtnIcon={">"}
40  // sets the left navitgation button icon
41  // default feather arrow-left svg icon
42  // you can pass jsx here or just a string
43  leftBtnIcon={"<"}
44  //hides the navigantion button
45  // default false
46  hideNavBtns={false}
47  // hides the navigation buttons on mobile devices
48  // default true
49  hideNavBtnsOnMobile={true}
50  // shows the scroll of the tabs
51  // default false
52  showTabsScroll={false}
53  // returns the DOMRect object of the selected tab and the tabs container
54  getTabsBoundingClientRects={(val) => console.log(val)}
55  // A react ref that can be used to control the tabs programmatically
56  //   Check the API section to understand more
57  action={ref}
58  //   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.
59  //   Check the API section to understand more or you can play with it to understand the idea
60  mode="scrollSelectedToCenterFromView"
61  //   changes the underline HTML element
62  navBtnAs="div"
63  //   These props sets the className of their elements
64  tabsContainerClassName=""
65  tabsUpperContainerClassName=""
66  tabsContainerClassName=""
67  leftNavBtnClassName=""
68  rightNavBtnClassName=""
69  navBtnClassName=""
70  navBtnContainerClassName=""
71  //  Sets the style of these element
72  navBtnStyle={{}}
73  tabsContainerStyle={{}}
74  tabsUpperContainerStyle={{}}
75  //    You can get the ref of these elements
76  tabsContainerRef={ref}
77  tabRef={ref}
78  leftNavBtnRef={ref}
79  rightNavBtnRef={ref}
80>
81  <Tab>item </Tab>
82  {[...Array(20).keys()].map((tab) => (
83    <Tab key={tab}>Tab {tab}</Tab>
84  ))}
85</Tabs>

API

Tab

TabScreen

If you liked this project don't forget to see my other projects on NPM and github

Contrubite

Show your support by giving a ⭐. Any feature requests are welcome! Anyone is welcomed to contribute in this project.

Financial Contributions

Buying me coffee will help me sustain the updates and work on new project for the open-source

Organizations

Support this project with your organization / company or individual.