New version of react-tabs-scrollable

[Mood-al]

👋 Hey!

I'm working a new version of react-tabs-scrollable adding new features such as:

1. adding typescript.
2. adding changes on the code structure to make it cleaner and more performant.
3. adding new API to it and make it more compatible with react-kfc-menu.

these are what came to my mind so far so please if you have any feature requests or things you would like to add them to the package just let me know.

Thanks.

[Pegase745]

@Mood-al That's great news to read! We've been using your library for a while now, and it's cool to learn you're working on a new version. If we can be of any help to review, don't hesitate 🙌

[Mood-al]

Oh, Thanks for this nice comment.

Can I know what is the use case that you are using it for?

[Mood-al]

Hey folks,

I just published react-tabs-scrollable Version 2.0.0-alpha.

I hope you try it and give me your feedbacks and reviews for it.
since it's in Alpha version if you faced any bugs, you can open an issue or send to me via email.

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 made it more performant, since I was using 4 useEffect hooks in the code to observe the changes of the tabs and now in the new version I'm using just 2 useEffect one for the scroll event and the second one is to use the ResizeObserver interface to observe the changes on the tab container div.

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.

Instead of relying on state changes and useEffect to observe the tab click change, now I'm doing it directly via onClick.

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.