Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
react-tabs-scrollable
Advanced tools
a simple react scrollable tabs with a lot of additional features and with fully supporting of RTL mode
a simple react scrollable tabs with a lot of additional features and with fully supporting of RTL mode
npm install --save react-tabs-scrollable@latest
yarn add react-tabs-scrollable@latest
npm install --save react-tabs-scrollable@1.0.10
yarn add react-tabs-scrollable@1.0.10
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.
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;
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;
<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>
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 |
mode | scrollSelectedToStart | string | it 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:
|
action | - | ref | react 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() |
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 |
getTabsBoundingClientRects | - | function | returns a callback with the DOMRects object of the selected tab and the tabsContainer. |
tabsContainerRef | - | ref | the tabs container ref object |
tabRef | - | ref | the tabs ref object and it returns an array of all the tab ref |
leftNavBtnRef | - | ref | sets the left navigation btn's ref |
rightNavBtnRef | - | ref | sets the right navigation btn's ref |
navBtnStyle | - | object | sets the navigation btns' style object |
tabsContainerStyle | - | object | Sets tabs container's style object |
tabsUpperContainerStyle | - | object | Sets the tabs upper container's style object |
leftNavBtnClassName | - | string | Sets the left navigation button's className |
rightNavBtnClassName | - | string | Sets the right navigation button's className |
navBtnClassName | - | string | Sets the navigation buttons' className |
navBtnContainerClassName | - | string | Sets the navigation buttons' container className |
tabsUpperContainerClassName | - | string | Sets the upper tabs container's className |
tabsContainerClassName | - | string | Sets the tabs container's className |
navBtnAs | button | string | Sets the HTML element of the navigation buttons |
Name | Default | Type | Description |
onTabClick | - | function | You can get access on the onClick function for each tab, when you want some logic for uppon each tab click. |
tabAs | button | string | 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 | - | string | you can pass a custom className to the Tab component |
Name | Default | Type | Description |
activeTab* | - | integer | the selected tab value which must be passed to the commponent |
index* | - | integer | string | the index of the tabscreen which must match the activeTab integer |
as | dov | string |
You can change the HTML element of the
TabScreen
|
style | - | object | sets Tab's style object |
className | - | string | you 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
Show your support by giving a ⭐. Any feature requests are welcome! Anyone is welcomed to contribute in this project.
Buying me coffee will help me sustain the updates and work on new project for the open-source
Support this project with your organization / company or individual.
FAQs
a simple react scrollable tabs with a lot of additional features and with fully supporting of RTL mode
We found that react-tabs-scrollable demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
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.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.