What's the rationale behind the move from a React component to a WebComponent?

[spacecat]

I can't seem to find any info on this. If there is can someone please point me to it? If not, what is the reason behind this change? Is there some thread in Issues or Discussions or somewhere else? I'm really interested in knowing why the React component has been deprecated in favor of a WebComponent.

Also, it would be nice that on this page
https://swiperjs.com/react
there was a link or an info box where it says why this change was made. So if possible, could someone please add it?

Thanks.

[AdamKniec]

Aditionally, I tried to implement the swiper-elements version in my project but the solution does not seem to support TypeScript at the moment. It requires a lot of workarounds :(

[jkergal]

I aggree with you, it would be nice to know the reasons...
Swiper Element is so tedious to implement on a react / typescript stack. Need to find workarounds for so much details.
It was way better with the react components...

[michalpawlowski34]

I agree. Can't understand what is the reason to change something that imo currently seems to work pretty well to something that, as the previous speakers mentioned, it requires painful tweaking the code for hours.
And if there is a reason I am also curious what is it 👀

[jbenning97]

@nolimits4web would it be possible to get an answer for this? Thanks in advance! 😄

[maxswjeon]

I really wonder why this moved to web components, and I cannot find a working example of react + typescript stack. More specifically, I'm looking for react + typescript + tailwind wokring examples. I really liked this project, but it's really unusable at this point.

[akhatri]

I tried the web component version in my next.js app and lots of things were broken with carousels not initialized, and no TS support. I hope there is still support for React SwiperJS or if someone can maintain a fork of it otherwise the adoption would be reduced to this complexity in setting up for react projects

[Redge1973]

I also tried to use the web component in my React project, but I still couldn't get it to work, so I'm just hoping that this announcement will be retracted and continue to use the 10 version. I also don't understand the reason at all, since React is not just any framework.

[Redge1973]

I really tried also with this tutorial
https://swiperjs.com/blog/using-swiper-element-in-react
but I could not get it work

[baranelitez]

I'd like to know this too. Just doesn't make sense. It's almost infinitely harder to implement the Element solution instead of just throwing the react component inside. And I have yet to come across a SINGLE project that uses swiper with webcomponents.

It's probably a weird fantasy of someone to use Web Components. I fail to see any reasonable thought behind this.

[lozandier]

@baranelitez Nitpick: There are definitely people who do; I actually find it weird when the docs for things like Material You Slider shows the React Component integration but not the integration instructions for the Web Component version…

Fortunately (but unfortunately not free) Slider Studio shows such things; you may want to use it for the up-to-date React builds to see what you may be doing wrong by reviewing the code sandbox instance or source code it generates (or look at the example React pens associated with the component).

It's easier the Web Component version when integrating with other frameworks (i.e. compile-style ones like svelte). React 16+ makes integration easier besides using Preact.

It's possible the documentation for the component may be stale as far as React is concerned. Seems the newer code generated from Swiper Studio needs to be used for the documentation.

[spacecat]

Someone please copy the Swiper Studio docs/code and paste it here if the terms of service allow it :)

[spacecat]

It's been six months since my last post (comment) and 1,5 years since I posted this discussion.

I've noticed something.

If you go to the old docs https://v9.swiperjs.com/react it still says:

Swiper React components will likely to be removed in future versions. It is recommended to migrate to Swiper Element instead.

In the new docs https://swiperjs.com/react that paragraph has been removed.

@nolimits4web ,

Question 1: So which one is it - will Swiper React Components be removed - yes or no?
Question 2: If it will be around; can you please update the docs?
Question 3: Can you please let the community know about the introduction of Swiper Element (WebComponent)? Will it be around? Or maybe it's time to kill it?

Thanks!

[PaiJi]

This ambiguity eventually put me off using the package.😕

[spacecat]

This ambiguity eventually put me off using the package.😕

@PaiJi which lib are you using instead?

[PaiJi]

I just needed a simple swiper, so in the end I went with: https://github.com/davidjerleke/embla-carousel

[spacecat]

@PaiJi Interesting. Thanks for sharing. It looks as if it's on the rise:

[kdamier]

I will check it out too. Swiper's accessibility has been killing me. I'm surprised there are barely any discussions on that.