Simple and powerfull dynamic react swiper component
npm install --save @kolserdav/swiper
import React, { useState, useEffect } from 'react';
import { Swiper, GetSwipeHandler, Swipe } from '@kolserdav/swiper';
import '@kolserdav/swiper/dist/styles.css';
const COUNT = 4;
const getNext: GetSwipeHandler = async (old) => {
let id = old + 1;
id = id <= COUNT ? id : 0;
return {
id,
children: <h1>Test {id}</h1>,
};
};
const getPrevios: GetSwipeHandler = async (old) => {
let id = old - 1;
id = id >= 0 ? id : COUNT;
return {
id,
children: <h1>Test {id}</h1>,
};
};
const App = (): React.ReactElement => {
const [current, setCurrent] = useState<Swipe>();
useEffect(() => {
if (!current) {
(async () => {
setCurrent(await getNext(0));
})();
}
}, []);
return (
<div>
{current && (
<Swiper
defaultCurrent={current}
getNext={getNext}
getPrev={getPrevios}
invitationAnimation={true}
durationAnimation={1000}
/>
)}
</div>
);
};
export default App;
interface SwiperProps {
/**
* Current card content
*/
defaultCurrent: Swipe;
/**
* Get next card handler
*/
getNext: GetSwipeHandler;
/**
* Get previous card handler
*/
getPrev: GetSwipeHandler;
/**
* Class name for content block
*/
className?: string;
/**
* invitation animation
*/
invitationAnimation?: boolean;
/**
* On swipe callback
*/
onSwipe?: (currentId: number) => void;
/**
* Auto slide if provieded
*/
durationAnimation?: number;
/**
* Blocked swipe event
*/
blockSwipe?: boolean;
/**
* Show dots
*/
dots?: {
list: number[];
active: number;
};
}
MIT © kolserdav