Problem on ref in typescript

[farhadf246]

Check that this is really a bug

• [X] I confirm

Reproduction link

https://codesandbox.io/s/swiper-default-react-forked-scddn?file=/src/App.tsx

Bug description

i want to use ref in typescript but i got this error on IDE and build time

this is my code: const swiperRef = useRef() as React.RefObject<any> <Swiper ref={swiperRef} className="mySwiper">

this is error message: Type '{ children: Element[]; ref: RefObject<any>; className: string; }' is not assignable to type 'IntrinsicAttributes & SwiperProps & { children?: ReactNode; }'. Property 'ref' does not exist on type 'IntrinsicAttributes & SwiperProps & { children?: ReactNode; }'

i'm not sure i'm doing something wrong or this is a bug.

Expected Behavior

No response

Actual Behavior

No response

Swiper version

7.3.1

Platform/Target and Browser Versions

chrome

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] 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

[mattvb91]

Just came across the same issue and my current hack is to do the following:

  const swiper = useRef() as any;

<Swiper
          onInit={(core: SwiperCore) => {
            swiper.current = core.el
          }}
/>

[farhadf246]

Just came across the same issue and my current hack is to do the following:

  const swiper = useRef() as any;

<Swiper
          onInit={(core: SwiperCore) => {
            swiper.current = core.el
          }}
/>

Thanks I'm doing this right now but I think this is not the right way

[mattvb91]

Yup its for sure just a workaround hack to get the ref. I haven't been able to find a solution for working with the ref in another way

[wibed]

you could create your own union type using:

const RefSwiper: React.FunctionComponent<
  SwiperProps & RefAttributes<SwiperCore>
> = Swiper;

[wibed]

@farhadf246 @nolimits4web

i think this issue can be closed

[KevinKreps]

Where does SwiperCore comes from? It is not exposed by swiper/react

[I-am-abdulazeez]

@KevinKreps it is exported from swiper package itself not swiper/react

import SwiperCore from "swiper"

[benjaminhonorio]

the correct type (for newer versions of Swiper) for Swiper instance is SwiperClass. So just do: import SwiperClass from 'swiper' const swiperRef = useRef<SwiperClass>()

[dasilvaluis]

Hi! Looking to solve this issue through this PR: https://github.com/nolimits4web/swiper/pull/6186

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[saintyusuf]

Is there a solution on this case? I tried almost all the solutions but non of them worked. I'm working on create-react-app --template typescript. When I was working without --template typescript there was no problem like this.

[josh-ag]

Am currently having same issue using this library. am working on react project with typescript. non of the solution suggested here seem to workout for me.

[maksymKhaiuk1989]

import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore from 'swiper';

const swiperRef = useRef<SwiperCore>();


      <Swiper
        onSwiper={(swiper) => {
          swiperRef.current = swiper;
        }}
      >
...
</Swiper>

[1mehdifaraji]

I solved the typescript issue by using SwiperRef type imported from swiper/react and use swiper functions by accessing them from current.swiper like this:

import { Swiper, SwiperRef, SwiperSlide } from "swiper/react";

const swiperRef = useRef<SwiperRef>(null);

const slideNext = (): void => swiperRef?.current?.swiper.slideNext();

<Swiper ref={swiperRef}

[aliBit68]

I solved the typescript issue by using SwiperRef type imported from swiper/react and use swiper functions by accessing them from current.swiper like this:

import { Swiper, SwiperRef, SwiperSlide } from "swiper/react";

const swiperRef = useRef<SwiperRef>(null);

const slideNext = (): void => swiperRef?.current?.swiper.slideNext();

<Swiper ref={swiperRef}

Thanks this solution worked for me