RTL support for version 2

[erfanium]

I can't make this package work with an RTL Next.js project. Should I do something?

[erfanium]

I'm going to make a PR today. hope I can fix it

[asmyshlyaev177]

Hi, sorry that don't have much time right now.

Will take a look at weekend.

[asmyshlyaev177]

@erfanium did you make a PR?

[erfanium]

@asmyshlyaev177 No, unfortunately I couldn't fix that

[asmyshlyaev177]

@erfanium Can you describe how it should works?

[erfanium]

@asmyshlyaev177 I just copy pasted basic example with left & right buttons, but buttons don't work properly, If you test examples with RTL direction, you will probably find it out

[erfanium]

Also LeftArrow and RightArrow is not a good naming for user interfaces because thay depends on LTR direction. consider StartArrow and EndArrow like what bootstrap 5 did

[asmyshlyaev177]

So basically you wanna something like https://codesandbox.io/s/rtl-9r5dy?file=/src/index.tsx ?

[erfanium]

Yes, but you should add dir="rtl" attribute to body tag, your example is not rtl yet https://codesandbox.io/s/rtl-forked-bj3pv?file=/public/index.html

[aryan-wayne]

Hi, @asmyshlyaev177 thank you. I really like the solution. by the way, @erfanium just continue the reverse work and add direction ltr to div that wraps the ScrollMenu and create a wrapper component to your Card or just add direction rtl to it. I hope the reverse in order of items and setPosition fnc add no side effect & believe this is no issue anymore, but adding rtl props would be really great.

[Mood-al]

Hey guys is there any updates on RTL mode? when i add dir rtl to the body the entire menu crushes @asmyshlyaev177

[choxnox]

Any update on the support for this?

So basically you wanna something like https://codesandbox.io/s/rtl-9r5dy?file=/src/index.tsx ?

Can you re-upload the code since this sandbox is not longer available.

[Mood-al]

Any update on the support for this?

So basically you wanna something like https://codesandbox.io/s/rtl-9r5dy?file=/src/index.tsx ?

Can you re-upload the code since this sandbox is not longer available.

I built this component for this if you want you can use it

https://www.npmjs.com/package/react-tabs-scrollable

[choxnox]

Any update on the support for this?

So basically you wanna something like https://codesandbox.io/s/rtl-9r5dy?file=/src/index.tsx ?

Can you re-upload the code since this sandbox is not longer available.

I built this component for this if you want you can use it

https://www.npmjs.com/package/react-tabs-scrollable

@Mood-al Correct me if I'm wrong but your library doesn't seem to support "group scrolling" and by group scrolling I mean scrolling not by fixed N elements but rather when scrolling next, the first visible item is the last item in the previous group (same like how Instagram stories scroll works)?

[Mood-al]

Any update on the support for this?

So basically you wanna something like https://codesandbox.io/s/rtl-9r5dy?file=/src/index.tsx ?

Can you re-upload the code since this sandbox is not longer available.

I built this component for this if you want you can use it

https://www.npmjs.com/package/react-tabs-scrollable

@Mood-al Correct me if I'm wrong but your library doesn't seem to support "group scrolling" and by group scrolling I mean scrolling not by fixed N elements but rather when scrolling next, the first visible item is the last item in the previous group (same like how Instagram stories scroll works)?

I'm sorry i really didnt understand what do you mean about group scrolling if you can share a video reproducing the functionality

[asmyshlyaev177]

Any update on the support for this?

So basically you wanna something like https://codesandbox.io/s/rtl-9r5dy?file=/src/index.tsx ?

Can you re-upload the code since this sandbox is not longer available.

Sure, will do tomorrow.

[choxnox]

Any update on the support for this?

So basically you wanna something like https://codesandbox.io/s/rtl-9r5dy?file=/src/index.tsx ?

Can you re-upload the code since this sandbox is not longer available.

Sure, will do tomorrow.

Thank you, that would be amazing since RTL issue is currently blocking our deployment to production.

[choxnox]

Any update on the support for this?

So basically you wanna something like https://codesandbox.io/s/rtl-9r5dy?file=/src/index.tsx ?

Can you re-upload the code since this sandbox is not longer available.

I built this component for this if you want you can use it https://www.npmjs.com/package/react-tabs-scrollable

@Mood-al Correct me if I'm wrong but your library doesn't seem to support "group scrolling" and by group scrolling I mean scrolling not by fixed N elements but rather when scrolling next, the first visible item is the last item in the previous group (same like how Instagram stories scroll works)?

I'm sorry i really didnt understand what do you mean about group scrolling if you can share a video reproducing the functionality

You can check the functionality here: https://www.instagram.com/sheinofficial/

Ok, maybe my terminology is a bit off, it's rather "pages" than "groups".

Try scrolling stories links (with circular images) and you'll notice that each page scrolls by the amount of items shown (when you scroll right you'll notice the last element in the page becomes the first element of the next page). If you try it on mobile screen sizes you'll notice the same behavior even though there is less items per page.

So unlike your library where the scroll works by fixed N amount of items, the Instagram one makes sure you always see where the next page begins in order to keep track of more than a few items in the scrolling list.

Also there are some other suggestions and issues which would need to be fixed in order for it to replace this library (activeTab and onTabClick are required - why? I don't want library handle the styling for me, the tab content is essentially a button so if I provide my own external links in form of the <a> elements then I'll end up with <a> element inside <button> element which doesn't make sense etc.).

I think these two libraries are similar but they serve different purposes because this one is generic and it can have any arbitrary element in it while yours serve more like a navigation but it supports RTL.

[Mood-al]

Any update on the support for this?

So basically you wanna something like https://codesandbox.io/s/rtl-9r5dy?file=/src/index.tsx ?

Can you re-upload the code since this sandbox is not longer available.

I built this component for this if you want you can use it https://www.npmjs.com/package/react-tabs-scrollable

@Mood-al Correct me if I'm wrong but your library doesn't seem to support "group scrolling" and by group scrolling I mean scrolling not by fixed N elements but rather when scrolling next, the first visible item is the last item in the previous group (same like how Instagram stories scroll works)?

I'm sorry i really didnt understand what do you mean about group scrolling if you can share a video reproducing the functionality

You can check the functionality here: https://www.instagram.com/sheinofficial/

Ok, maybe my terminology is a bit off, it's rather "pages" than "groups".

Try scrolling stories links (with circular images) and you'll notice that each page scrolls by the amount of items shown (when you scroll right you'll notice the last element in the page becomes the first element of the next page). If you try it on mobile screen sizes you'll notice the same behavior even though there is less items per page.

So unlike your library where the scroll works by fixed N amount of items, the Instagram one makes sure you always see where the next page begins in order to keep track of more than a few items in the scrolling list.

Also there are some other suggestions and issues which would need to be fixed in order for it to replace this library (activeTab and onTabClick are required - why? I don't want library handle the styling for me, the tab content is essentially a button so if I provide my own external links in form of the <a> elements then I'll end up with <a> element inside <button> element which doesn't make sense etc.).

I think these two libraries are similar but they serve different purposes because this one is generic and it can have any arbitrary element in it while yours serve more like a navigation but it supports RTL.

Oh i got you now, well I was planning to build a new one just to serve this kind of functionality like stories but unfortunately now I have no time for that especially i want to make version of my library in svelte. And you are right my component is more focused on navigation side and the whole reason i built it for that.

[asmyshlyaev177]

This library also started very similar to react-tabs-scrollable, but more features I added harder it become to maintain, at some point I have to rewrite it from scratch. Now it's little hard to start with, but can customize almost everything.

[Mood-al]

This library also started very similar to react-tabs-scrollable, but more features I added harder it become to maintain, at some point I have to rewrite it from scratch. Now it's little hard to start with, but can customize almost everything.

This is why I dont want to add more features to react-tabs-scrollable because I know in certain time it would be so hard to maintain. And by the way if your library worked for me in RTL I wouldnt even build this library.

[asmyshlyaev177]

Something like this https://codesandbox.io/s/rtl-8lix35?file=/src/index.tsx Let me know if it's ok.

[asmyshlyaev177]

This library also started very similar to react-tabs-scrollable, but more features I added harder it become to maintain, at some point I have to rewrite it from scratch. Now it's little hard to start with, but can customize almost everything.

This is why I dont want to add more features to react-tabs-scrollable because I know in certain time it would be so hard to maintain. And by the way if your library worked for me in RTL I wouldnt even build this library.

But you got valuable experience, can get much more, in exchange for your time.

[choxnox]

Something like this https://codesandbox.io/s/rtl-8lix35?file=/src/index.tsx Let me know if it's ok.

Thank you @asmyshlyaev177, it does work when the number of elements exceed the width of the container but if you have less elements (so no scrolling needed), items are still left aligned while technically they should be right aligned.

You can check here with your demo: https://codesandbox.io/s/rtl-forked-nehzum?file=/src/index.tsx

[asmyshlyaev177]

Something like this https://codesandbox.io/s/rtl-8lix35?file=/src/index.tsx Let me know if it's ok.

Thank you @asmyshlyaev177, it does work when the number of elements exceed the width of the container but if you have less elements (so no scrolling needed), items are still left aligned while technically they should be right aligned.

You can check here with your demo: https://codesandbox.io/s/rtl-forked-nehzum?file=/src/index.tsx

Yeap, fixed in a new version and updated example https://codesandbox.io/s/rtl-8lix35?file=/src/index.tsx