react-hooks-swiper v1.2.3

react-hooks-swiper

Use

Install

npm install react-hooks-swiper

Import

import Swiper from 'react-hooks-swiper';

Implement

<Swiper
snapPoint={20}
transitionDuration="0.2"
handlerObjects={[]}>
    Insert pages here
</Swiper>

Note: you can only have 1 swiper per page as it uses querySelector to get the element by class.

Swiper props

• handlerObjects: an array of objects that control if a swipe is performed. The handlerObject has 3 values: - id: The index which it belongs to starting at 0, first child id would then be 0-second child 1, etc... - leftFunction: The function that controls if the user is allowed to swipe left. Return true to allow, false to deny. - rightFunction: The function that controls if the user is allowed to swipe left. Return true to allow, false to deny. Example structure:

[{ id: 0, leftFunction: () => { true }, rightFunction: () => { false }}]

This will allow the user to swipe left on the first page but not right. NOTE: The user cannot swipe out of bound regardless of whether the leftFunction or rightFunction returns true.

• snapPoint: a prop that decides how far the user has to swipe to trigger a swipe in pixels. Example 20 will swipe if the swipe length is greater or equal to 20px.
• transitionDuration: a prop that controls the speed of the CSS swipe transition in seconds.

Functions

• forceSwipe: a function that allows you to force a swipe. Example use:

import { forceSwipe } from 'react-hooks-swiper';

handleClick = () => {
   forceSwipe('right');
}

Note: it won't swipe if out of bounds.

License

MIT