`useSwiper()` instance is returning null

See original GitHub issue

Check that this is really a bug

I confirm

Reproduction link

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

Bug description

I’m using the new useSwiper hook to add a custom arrow to my Swiper slider.

But the hook is returning null.

Expected Behavior

I’m expecting the arrow to work properly, to go to the next slide in this case.

Actual Behavior

No response

Swiper version

8.0.7

Platform/Target and Browser Versions

Linux, Chrome 100.0.4896.46 (Official Build) beta (64-bit)

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

Issue Analytics

State:
Created a year ago
Reactions:3
Comments:7

Top GitHub Comments

16reactions

vltanskycommented, Apr 6, 2022

Hook should be used inside Swiper component as @meesfrenkelfrank mentioned.

If you want to get swiper instance use one of these approaches: https://codesandbox.io/s/swiper-default-react-forked-xi5tuh?file=/src/App.jsx https://github.com/nolimits4web/swiper/issues/3855#issuecomment-827943545 https://swiperjs.com/demos#manipulation

8reactions

meesfrenkelfrankcommented, Apr 4, 2022

That’s because useSwiper must be used by components inside a Swiper element. see this example.

Top Results From Across the Web

How to use useSwiper outside a Swiper instance?

I'm stuck at using external buttons to navigate between slides (previous and next). Swiper has a useSwiper hook that can provide programmatic ...

Swiper React Components

Swiper React provides useSwiper hook to easliy get the Swiper instance in ... setControlledSwiper] = useState(null); return ( <main> {/* Main Swiper ->...

Changing slides using buttons above swiper - Ionic Forum

I'm trying to change slides using buttons that are placed above Swiper onClick: const Tab: React.FC = () => { const swiper =...

A Library to Use Swiper As A Reactjs Component - Morioh

A library to use idangerous Swiper as a ReactJs component which allows Swiper's modules custom build.

swiper.activeindex react | The AI Search Engine You Control

You can use swiper instance to access swiper API ... unstable_renderIntoContainer() now return null if called from inside a lifecycle method.