Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-tabs-scrollable

Package Overview
Dependencies
Maintainers
0
Versions
23
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-tabs-scrollable

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

  • 2.0.7
  • latest
  • npm
  • Socket score

Version published
Maintainers
0
Created
Source

react-tabs-scrollable

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

NPM JavaScript Style Guide

Install

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

V1

npm install --save react-tabs-scrollable@1.0.10
yarn 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

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;

#Tabs with TabScreen

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);
  };
  const tabsArray = [...Array(20).keys()];
  return (
    <>
      <Tabs activeTab={activeTab} onTabClick={onTabClick}>
        {/* generating an array to loop through it  */}
        {tabsArray.map((item) => (
          <Tab key={item}>Tab {item}</Tab>
        ))}
      </Tabs>

      {tabsArray.map((item) => (
        <TabScreen
          key={item}
          activeTab={activeTab}
          index={item}
          // You can add animation with adding a custom class
          className="some-animation-class"
        >
          TabScreen {item}
        </TabScreen>
      ))}
    </>
  );
};

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 onLeftNavBtnClick , onRightNavBtnClick 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}
  // returns the DOMRect object of the selected tab and the tabs container
  getTabsBoundingClientRects={(val) => console.log(val)}
  // A react ref that can be used to control the tabs programmatically
  //   Check the API section to understand more
  action={ref}
  //   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.
  //   Check the API section to understand more or you can play with it to understand the idea
  mode="scrollSelectedToCenterFromView"
  //   changes the underline HTML element
  navBtnAs="div"
  //   These props sets the className of their elements
  tabsContainerClassName=""
  tabsUpperContainerClassName=""
  tabsContainerClassName=""
  leftNavBtnClassName=""
  rightNavBtnClassName=""
  navBtnClassName=""
  navBtnContainerClassName=""
  //  Sets the style of these element
  navBtnStyle={{}}
  tabsContainerStyle={{}}
  tabsUpperContainerStyle={{}}
  //    You can get the ref of these elements
  tabsContainerRef={ref}
  tabRef={ref}
  leftNavBtnRef={ref}
  rightNavBtnRef={ref}
>
  <Tab>item </Tab>
  {[...Array(20).keys()].map((tab) => (
    <Tab key={tab}>Tab {tab}</Tab>
  ))}
</Tabs>

API

NameDefaultTypeDescription
activeTab* -integerthe 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
mode scrollSelectedToStartstringit controls the behavoiur of the selected tab whether to move it to start | center | end | center if the tab is in the view. it contains 3 modes:
  • scrollSelectedToCenter: scrolls the selected tab to the center of view.
  • scrollSelectedToEnd: scrolls the selected tab to the end of view
  • scrollSelectedToCenterFromView: scrolls the selected tab to the center of view but even if the selected tab was already in the view. 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. see the demos to understand more!!
    I added this option just to make react-tabs-scrollable more compatible with react-kfc-menu
action-refreact ref fires when the component mounts. It's useful if you want to control some functionalities programmatically. It supports 4 function :
onLeftNavBtnClick ,onRightNavBtnClick, goToStart, goToEnd

onLeftNavBtnClick : to control the left btn click and use your own navigation button. you can call it by so ref.current.onLeftNavBtnClick()

onRightNavBtnClick : to control the right btn click and use your own navigation button. you can call it by so ref.current.onRightNavBtnClick()

goToStart : to control the tabs to go to the start of the tabs container. you can call it by so ref.current.goToStart()

goToEnd : to control the tabs to go to the end of the tabs container. you can call it by so ref.current.goToEnd()
isRTLfalseboolean 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)}
tabsScrollAmount3string | integer sets how many tabs you want to scroll on every move tabsScrollAmount={3}
animationDuration300s integer sets the animation duration of the scroll when you click on the navigation buttons note : this will overwirte the animationDuration value animationDuration={300}
navBtnCLickAnimationDuration300s integer sets the animation of the scroll when you click on the navigation buttons note : this will overwirte the animationDuration value navBtnCLickAnimationDuration={300}
selectedAnimationDuration300s 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}
rightBtnIconfeather arrow-right svg icon string | jsx sets the right navitgation button icon rightBtnIcon={'>'}
leftBtnIconfeather arrow-left svg icon string | jsx sets the left navitgation button icon leftBtnIcon={'>'}
hideNavBtnsfalse boolean hides the navigantion button hideNavBtns={false}
hideNavBtnsOnMobiletrue boolean hides the navigation buttons on mobile devices
showTabsScrollfalse boolean shows the scroll of the tabsn
getTabsBoundingClientRects- functionreturns a callback with the DOMRects object of the selected tab and the tabsContainer.
tabsContainerRef- refthe tabs container ref object
tabRef-refthe tabs ref object and it returns an array of all the tab ref
leftNavBtnRef-refsets the left navigation btn's ref
rightNavBtnRef-refsets the right navigation btn's ref
navBtnStyle-objectsets the navigation btns' style object
tabsContainerStyle-objectSets tabs container's style object
tabsUpperContainerStyle-objectSets the tabs upper container's style object
leftNavBtnClassName-stringSets the left navigation button's className
rightNavBtnClassName-stringSets the right navigation button's className
navBtnClassName-stringSets the navigation buttons' className
navBtnContainerClassName-stringSets the navigation buttons' container className
tabsUpperContainerClassName-stringSets the upper tabs container's className
tabsContainerClassName-stringSets the tabs container's className
navBtnAsbuttonstringSets the HTML element of the navigation buttons

Tab

NameDefaultTypeDescription
onTabClick-function You can get access on the onClick function for each tab, when you want some logic for uppon each tab click.
tabAsbuttonstring You can change the HTML element of the Tab
Note: Changing the underline element will affect on the accessiblity of the tab
style-object sets Tab's style object
className-stringyou can pass a custom className to the Tab component

TabScreen

NameDefaultTypeDescription
activeTab* -integerthe selected tab value which must be passed to the commponent
index* -integer | stringthe index of the tabscreen which must match the activeTab integer
asdovstring You can change the HTML element of the TabScreen
style-object sets Tab's style object
className-stringyou can pass a custom className to the TabScreen component

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

Buy Me A Coffee

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.

Keywords

FAQs

Package last updated on 02 Aug 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc