react-tabs-scrollable

react-tabs-scrollable

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

Install

npm install --save react-tabs-scrollable
yarn add react-tabs-scrollable

Demo

Demo

Features

• Easy to start with it takes you less than minute to start it up!
• It has 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 in literally everything inside it
• Small size 8k and 3.1k gzipped
• 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 much more ..

Usage

import React from 'react'
import { Tabs, Tab } from 'react-tabs-scrollable'
import 'react-tabs-scrollable/dist/rts.css'

const SimpleTabs = () => {
  // define state with initial value to let the tabs start with that value
  const [activeTab, setActiveTab] = React.useState(1)

  // define a onClick function to bind the value on tab click
  const onTabClick = (e, index) => {
    console.log(e)
    setActiveTab(index)
  }

  return (
    <Tabs activeTab={activeTab} onTabClick={onTabClick}>
      {/* generating an array to loop through it  */}
      {[...Array(20).keys()].map((item) => (
        <Tab key={item}>Tab {item}</Tab>
      ))}
    </Tabs>
  )
}

export default SimpleTabs

Full example with all features

<Tabs
  // the selected tab state which must be passed to the commponent
  activeTab={activeTab}
  // tab on click function
  // it has two props
  // first one is event object
  // second one is the index of the selected tab
  onTabClick={(val) => console.log(val)}
  // this prop returns a group of events to control the tabs such as onLeftBtnClick , onRightBtnClick to control the tabs
  // you should pass here a ref to get the required functionality
  action={tabRef}
  // sets if the direction of the page is RTL or not
  // default false
  isRTL={false}
  // sets if the tabs reached the end point of the tab container
  // function
  didReachEnd={(val) => console.log(val)}
  // sets if the tabs reached the start point container
  // function
  didReachStart={(val) => console.log(val)}
  // sets how many tabs you want to scroll on every move
  // default 3 tabs on each navigation button click
  tabsScrollAmount={3}
  // sets the general animation duration when you click on the navigation buttons and when you click out the tabs view
  // this option will disable navBtnCLickAnimationDuration and selectedAnimationDuration
  // default 300s
  animationDuration={300}
  // sets the animation of the scroll when you click on the navigation buttons
  // note : this will overwirte the animationDuration value
  // default 300s
  navBtnCLickAnimationDuration={300}
  // sets the animation of the scroll when you click on a tab that is out of the view
  // note : this will overwirte the animationDuration value
  // default 300s
  selectedAnimationDuration={300}
  // sets the right navitgation vutton icon
  // default feather arrow-right svg icon
  // you can pass jsx here or just a string
  rightBtnIcon={'>'}
  // sets the left navitgation button icon
  // default feather arrow-left svg icon
  // you can pass jsx here or just a string
  leftBtnIcon={'<'}
  //hides the navigantion button
  // default false
  hideNavBtns={false}
  // hides the navigation buttons on mobile devices
  // default true
  hideNavBtnsOnMobile={true}
  // shows the scroll of the tabs
  // default false
  showTabsScroll={false}
  // sets the color of navigation buttons if you dont want to use your own
  // it just changes the stroke color of the svg icon
  // you cant use this option if you used your own btns
  // or you can customize it using css
  navBtnsIconColor={'HEX'}
  // gets the coordinates of the selected tab
  // returns object of the width and the scrollLeft of the selected tab
  // be careful when you use state with this function it will be triggered on every scroll movement and when the app rerenders
  selectedTabCoordinates={(val) => console.log(val)}
>
  <Tab>item </Tab>
  {[...Array(20).keys()].map((tab) => (
    <Tab key={tab}>Tab {tab}</Tab>
  ))}
</Tabs>

API

Name	Default	Type	Description
activeTab*	-	integer	the selected tab value which must be passed to the commponent
onTabClick*	-	function	function(event, value) => void 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
action	-	ref	react ref fired when the component mounts. It's useful if you want to some functionalities programmatically. It supports 4 function : onLeftBtnClick ,onRightBtnClick, goToStart, goToEnd onLeftBtnClick : to control the left btn click and use your own navigation button. you can call it by so ref.onLeftBtnClick() onRightBtnClick : to control the right btn click and use your own navigation button. you can call it by so ref.onRightBtnClick() goToStart : to control the tabs to go to the start of the tabs container. you can call it by so ref.goToStart() goToEnd : to control the tabs to go to the end of the tabs container. you can call it by so ref.goToEnd()
isRTL	false	boolean	sets if the direction of the tabs is RTL or not
didReachEnd	-	function	sets if the tabs reached the end point of the container didReachEnd={(val) => console.log(val)}
didReachStart	-	function	sets if the tabs reached the start point of the container didReachStart={(val) => console.log(val)}
tabsScrollAmount	3	string | integer	sets how many tabs you want to scroll on every move tabsScrollAmount={3}
animationDuration	300s	integer	sets the animation duration of the scroll when you click on the navigation buttons note : this will overwirte the animationDuration value animationDuration={300}
navBtnCLickAnimationDuration	300s	integer	sets the animation of the scroll when you click on the navigation buttons note : this will overwirte the animationDuration value navBtnCLickAnimationDuration={300}
selectedAnimationDuration	300s	integer	sets the animation of the scroll when you click on a tab that is out of the view note : this will overwirte the animationDuration value selectedAnimationDuration={300}
rightBtnIcon	feather arrow-right svg icon	string | jsx	sets the right navitgation button icon rightBtnIcon={'>'}
leftBtnIcon	feather arrow-left svg icon	string | jsx	sets the left navitgation button icon leftBtnIcon={'>'}
hideNavBtns	false	boolean	hides the navigantion button hideNavBtns={false}
hideNavBtnsOnMobile	true	boolean	hides the navigation buttons on mobile devices
showTabsScroll	false	boolean	shows the scroll of the tabsn
selectedTabCoordinates	-	function	gets the coordinates of the selected tab returns object of the width and the scrollLeft of the selected tab be careful when you use state with this function it will be triggered on every scroll movement and when the app rerenders selectedTabCoordinates={(val) => console.log(val)} // val returns {width : float , left : float} // the left turns into right when isRTL={true}

you can see all the examples in the Demo

please let me see your reviews and if there're any features you want me to add to them

License

MIT © Mohammed Aliwi