Simple and powerfull react swiper component
npm install @kolserdav/swiper> Simple and powerfull dynamic react swiper component
 
``bash`
npm install --save @kolserdav/swiper
`tsx
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:
const getPrevios: GetSwipeHandler = async (old) => {
let id = old - 1;
id = id >= 0 ? id : COUNT;
return {
id,
children:
const App = (): React.ReactElement => {
const [current, setCurrent] = useState
useEffect(() => {
if (!current) {
(async () => {
setCurrent(await getNext(0));
})();
}
}, []);
return (
export default App;
`
`tsx
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?: {
inactive: boolean;
list: number[];
active: number;
};
/**
* Makes dark colors as light
*/
darkTheme?: boolean;
/**
* Component height
*/
height?: number;
}
``
MIT © kolserdav