[React] Typescript errors in `ref` and `onSwiper` props

[vicasas]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/s/swiper-typescript-types-errors-437w68

Bug description

Using Swiper with Typescript it throws errors in the ref and onSwiper props.

Expected Behavior

It should not throw an error even if types are assigned to it.

Actual Behavior

No response

Swiper version

8.0.6

Platform/Target and Browser Versions

macOs bigsur Chrome lastest

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[rtabulov]

hey, this is not a problem with Swiper or Typescript, i would say this is not a problem at all

ref is not supported for function components in react

You may not use the ref attribute on function components because they don’t have instances.

onSwiper shows error becuase types null and Swiper are not compatible, that's because you did not properly set the type on useState

to do that you should write

import type { Swiper } from 'swiper';
const [swiperInstance, setSwiperInstance] = useState<Swiper | null>(null);

[youngkyo0504]

Do you want access swiper container??
then do this.

function App() {
    const ref = useRef<SwiperCore>();
   
    <Swiper
      onInit={(core: SwiperCore) => {
        ref.current = swiper.el; 
        // "swiper.el" is what you want
      }}
    ></Swiper>
}

[vicasas]

hey, this is not a problem with Swiper or Typescript, i would say this is not a problem at all

@rtabulov The ref makes sense. But this means that Swiper should still be able to receive the ref without Typescript throwing an error. Perhaps using fordwarRef.

to do that you should write

Thinking out loud, you should consider adding last name Props to types. e.g. SwiperProps

Tends to be confusing without using import type

[vicasas]

@youngkyo0504 Taking that same code to my example in codesandbox how would it be? Using fordwarRef?

[SiJBC]

//@ts-ignore
onSwiper ={setThumbsSwiper}
it's a stranded friends last option it worked for me on this same issue - sometimes need to find quick workarounds - cannot see any situation where a type check would help to ensure the right function was being passed in

[TondeMoon]

//@ts-ignore onSwiper ={setThumbsSwiper} it's a stranded friends last option it worked for me on this same issue - sometimes need to find quick workarounds - cannot see any situation where a type check would help to ensure the right function was being passed in

this is also can be avoided by - const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);

its Swiper 6.8

[TomSmedley]

This is what I had to do with Swiper and React

import { Swiper, SwiperSlide } from 'swiper/react'
import { EffectCoverflow, type Swiper as SwiperRef } from 'swiper'

Then

const swiperRef = useRef<SwiperRef>()

And

onSwiper={(swiper) => {
    swiperRef.current = swiper
}}

Why there is a component called Swiper and a Interface called Swiper is beyond me! Really swiper/react needs an alias for Swiper interface from swiper package in my opinion.

[vicasas]

That's another "issue" that types have the same name as components and one must end up adding aliases to fix the name clash. All component types should be renamed to [Component]Props where possible.

[nolimits4web]

This is correct usage from 9.3.2

import { useEffect, useRef, useState } from "react";
import { Swiper, SwiperRef, SwiperClass } from "swiper/react";

import "swiper/css";

export const index = () => {
  const [instance, setInstance] = useState<SwiperClass | null>(null);
  const swiperElRef = useRef<SwiperRef>(null);

  useEffect(() => {
    instance?.slideTo(2)
    // ref usage
    console.log(swiperElRef.current?.swiper.activeIndex);
  }, [])
  return <Swiper ref={swiperElRef} onSwiper={setInstance}>This is a test page</Swiper>;
};
export { index as default };