ReactSwipeableView is resulting in errors with react 18

[markedwards]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

SwipeableDrawer is resulting in the following console error in react 18:

Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code.

There is a related issue here, but it is getting no traction so far.

Expected behavior 🤔

No error with react 18.

Steps to reproduce 🕹

Steps:

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[mnajdova]

This is a wrong repository for this issue, please refer to the other issue linked.

[markedwards]

Why is this the wrong repository for this issue? react-swipeable-views is a dependency of MUI. If that component is not working, and will not be updated, then MUI has to switch to use a different dependency, no?

[oliviertassinari]

Maybe we should remove the demos in the documentation that use react-swipeable-views. I wonder what are the alternatives to this project nowadays. It used to be a fun side-project for me, 6 years ago: https://github.com/oliviertassinari/react-swipeable-views/graphs/contributors.

Now, in oliviertassinari/react-swipeable-views#558, some were interested in taking over the maintenance. Maybe we can still find someone with a track record of great execution to be added as a maintainer.

[markedwards]

Apologies, I actually was confused between SwipeableViews and MUI's SwipeableDrawer (both of which I'm using in the same layout), and I mistakenly thought that this dependency was coming from SwipeableDrawer.

I agree with @oliviertassinari the issue here is simply that the docs should really point to a solution that is currently maintained.

[markedwards]

Now, in oliviertassinari/react-swipeable-views#558, some were interested in taking over the maintenance. Maybe we can still find someone with a track record of great execution to be added as a maintainer.

The thing is, react-wipeable-views is still a very popular package. react-responsive-carousel comes up in a google search, but it also abandoned. Is there a good alternative that is being actively maintained?

[markedwards]

I migrated to Swiper. The footprint is larger than react-swipeable-views, but it has quite a large feature set. It is also fully maintained, and seems to be extremely widely used.

I suggest the MUI docs get updated with an example using Swiper. The canonical example would be roughly the same size and complexity as the current react-swipeable-views example.

I'm willing to do a PR.

[oliviertassinari]

@markedwards but Swiper is for carousels no? react-swipeable-views wasn't built it solve this problem.

I'm reopening so we can acknowledge that this demo is not OK: https://mui.com/material-ui/react-tabs/#full-width. We can either:

1. Replace it with a native CSS implementation. I don't see why it wouldn't work. It wasn't possible 7 years ago when I created react-swipeable-views.
2. Find another project.
3. Remove the demo. This UX pattern has almost disappeared on mobile apps, nowadays.

Considering that after all this time nobody from the community, with some track record, has shown interest in taking ownership of react-swipeable-views to replace me, this will help me archive the project.

[markedwards]

Yeah it’s a bit of a different feature set, but you can do many of the same things. I’m not in love with Swiper to be honest. I’m using it to do a TikTok-style vertical feed, and it just barely gets the job done. It uses weird translate3D tricks and wreaks havoc with z index. And I’m pretty sure it can be done in a more performant way.

I’d be willing to contribute to the effort, whether that’s helping test, or whatever. I spent some time building my own solution, but it was enough work that I settled for Swiper and decided to come back to it.

[dev0T]

@markedwards but Swiper is for carousels no? react-swipeable-views wasn't built it solve this problem.

I'm reopening so we can acknowledge that this demo is not OK: https://mui.com/material-ui/react-tabs/#full-width. We can either:

1. Replace it with a native CSS implementation. I don't see why it wouldn't work. It wasn't possible 7 years ago when I created react-swipeable-views.

2. Find another project.

3. Remove the demo. This UX pattern has almost disappeared on mobile apps, nowadays.

Considering that after all this time nobody from the community, with some track record, has shown interest in taking ownership of react-swipeable-views to replace me, this will help me archive the project.

Any updates on this? The example is still there and will probably influence people to use a deprecated package

[mohsenomidi]

react-swipeable-views is using for animate the Tab transition, the transition is also made a great user experience to show the tab changes, and it is important in complex we apps with many tabs, and also allowing tabs to swiped, the carousels is generally used for slide shows.

[cdavid15]

@markedwards but Swiper is for carousels no? react-swipeable-views wasn't built it solve this problem.
I'm reopening so we can acknowledge that this demo is not OK: https://mui.com/material-ui/react-tabs/#full-width. We can either:

1. Replace it with a native CSS implementation. I don't see why it wouldn't work. It wasn't possible 7 years ago when I created react-swipeable-views.

2. Find another project.

3. Remove the demo. This UX pattern has almost disappeared on mobile apps, nowadays.

Considering that after all this time nobody from the community, with some track record, has shown interest in taking ownership of react-swipeable-views to replace me, this will help me archive the project.

Any updates on this? The example is still there and will probably influence people to use a deprecated package

Any recent progress / discussions on this? I’ve landed here as seen the swipeable tabs demo on the docs but never took it further once I noticed react-swipeable-views wasn’t maintained.