ref not exposed to us as prop

[ivanjeremic]

Check that this is really a bug

• [X] I confirm

Reproduction link

nope

Bug description

<Swiper ref={someRef}>
 ...
</Swiper>

We can't do this but we should have the option.

Expected Behavior

No response

Actual Behavior

No response

Swiper version

all

Platform/Target and Browser Versions

all

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

[nolimits4web]

what do you expect ref.current to return?

[ivanjeremic]

It works now was an issue with an other hook I guess.

[7iomka]

ivanjeremic

How you found a workaround for this?

 const swiperRef = useRef(null);

// ...
<Swiper ref={swiperRef}
   ... >
</Swiper>

gives me

Property 'ref' does not exist on type 'IntrinsicAttributes & SwiperProps & { children?: ReactNode; }'

Why? Swiper is exported as component with forwardRef and types needed to contain ref, for example with helper type React.ForwardRefExoticComponent<SwiperProps & React.RefAttributes<SwiperClassType>>

Another issue - I want to have a type of this ref. Currently swiper types not contain type of SwiperClass, but that is what we need. What do you think? @nolimits4web

This flow is required for control swiper instance outside.

Thanks.

[ivanjeremic]

ivanjeremic

How you found a workaround for this?

 const swiperRef = useRef(null);

// ...
<Swiper ref={swiperRef}
   ... >
</Swiper>

gives me

Property 'ref' does not exist on type 'IntrinsicAttributes & SwiperProps & { children?: ReactNode; }'

Why? Swiper is exported as component with forwardRef and types needed to contain ref, for example with helper type React.ForwardRefExoticComponent<SwiperProps & {...}>

Another issue - I want to have a type of this ref. Currently swiper types not contain type of SwiperClass, but that is what we need. What do you think? @nolimits4web

This flow is required for control swiper instance outside.

Thanks.

If I remember correctly it started working even though the error was there I have no access to the project anymore but this is what I remember.

[7iomka]

In that case, we'll have to wait for a response from @nolimits4web because this is a bug with wrong exported types

[ivanjeremic]

Yeah I have too still the same issue, we need to be able to use a ref with Swiper

<Swiper ref={ref}>
 ...
</Swiper>

[shotforsky]

I agreed with the ref proposal~ For now using the onSwiper props can help with getting the swiper instance.

Here is my code snippets, for someone might need this:

import { Swiper } from 'swiper/react';
import type { Swiper as SwiperType } from 'swiper';

const swiperRef = useRef<SwiperType | null>(null);

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

BTW, this is based on [email protected].

[nolimits4web]

Issue is closed because of outdated/irrelevant/not actual/needed more information/inactivity.

If this issue is still actual and reproducible for latest version of Swiper, please create new issue and fill the issue template correctly:

• Clearly describe the issue including steps to reproduce when it is a bug.
• Make sure you fill in the earliest version that you know has the issue.
• Provide live link or JSFiddle/Codepen or website with issue