		@@ -14,2 +14,9 @@ # react-tabs-scrollable

		if you had any issues with this version V1 works just fine so you can install it until I fix and update the package!

		```bash
		npm install --save react-tabs-scrollable@1.0.10
		yarn add react-tabs-scrollable@1.0.10
		```

		## Demos
		@@ -19,2 +26,6 @@

		## V1 docs

		[V1 docs](https://github.com/Mood-al/react-tabs-scrollable/tree/v1)

		## Features
		@@ -28,6 +39,6 @@
		- Fully accessible
		- You can control in literally everything inside it
		- Small sized
		- 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 props to all the elements used inside the package.
		- 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.
		@@ -38,20 +49,20 @@ - And much more ..

		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.
		- 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!.
		> 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 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 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`

		Instead of relying on state changes and useEffect to observe the tab click change, now I'm doing it directly via onClick.
		- 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 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 <code> <a href="https://www.npmjs.com/package/react-kfc-menu" target="_blank" rel="noopener"><span>react-kfc-menu</span></a></code> such as <code>mode</code> 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 new features to make the component more compatible with my new package <code> <a href="https://www.npmjs.com/package/react-kfc-menu" target="_blank" rel="noopener"><span>react-kfc-menu</span></a></code> such as <code>mode</code> 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 added `<TabScreen />` component if you want to use tab panels with the tabs.

		@@ -62,4 +73,2 @@ > I'm planning to add Swipeable component to make the TabScreens more interactive with drag and touch events on both, Desktop and mobile.

		If you liked the project dont forget to leave a star!

		## Usage
		@@ -66,0 +75,0 @@

dist/index.d.ts

dist/lib/components/NavBtns/index.d.ts

dist/lib/components/NavBtns/LeftNavBtnIcon.d.ts

dist/lib/components/NavBtns/RightNavBtnIcon.d.ts

dist/lib/components/Tab/index.d.ts

dist/lib/components/Tabs/index.d.ts

dist/lib/components/TabScreen/index.d.ts

dist/lib/index.d.ts

dist/lib/utils/animate.d.ts

dist/lib/utils/debounce.d.ts

dist/lib/utils/getNormalizedScrollLeft.d.ts

dist/lib/utils/ownderDocument.d.ts

dist/react-tabs-scrollable.es.js

dist/react-tabs-scrollable.es.js.map

dist/react-tabs-scrollable.umd.js

dist/react-tabs-scrollable.umd.js.map

dist/rts.css

dist/vite-env.d.ts

react-tabs-scrollable - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics