swiper: Problem on ref in typescript

Check that this is really a bug

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

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

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 6
Comments: 15 (1 by maintainers)

Most upvoted comments

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

benjaminhonorio on Jul 3, 2022

you could create your own union type using:

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

wibed on Dec 24, 2021

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
          }}
/>

mattvb91 on Dec 1, 2021

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}

1mehdifaraji on Mar 21, 2024

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

farhadf246 on Dec 5, 2021

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

aliBit68 on Apr 9, 2024

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

mattvb91 on Dec 6, 2021