react-swipeable-wrapper

A React component for swipeable views.

Package	Version
@mohalla-tech/react-swipeable-wrapper

Installation

npm install --save @mohalla-tech/react-swipeable-wrapper
or
yarn add @mohalla-tech/react-swipeable-wrapper

Example

Github Pages Demo

Usage

importReact,{useCallback,useRef,useState}from"react";importSwipeableWrapperfrom"react-swipeable-wrapper";consttabs=["Tab 1","Tab 2","Tab 3"];constinitialIndex=0;conststyles={parent: {maxWidth: 800,margin: "auto",paddingTop: "10em",overflow: "hidden",},text: {padding: "1em 2px",fontStyle: "bold",},slide: {padding: 15,minHeight: 400,color: "#fff",},slide1: {background: "#40E0D0",},slide2: {background: "#9FE2BF",},slide3: {background: "#FFBF00",},tabsParent: {width: "50%",},tabs: {display: "flex",justifyContent: "space-around",height: "2rem",},bottomBar: {height: "4px",borderTopRightRadius: "50px 20px",borderTopLeftRadius: "50px 20px",background: "#000080",width: `${100/tabs.length}%`,},nonSelectedTab: {color: "#DE3163",},selectedTab: {color: "#000080",},};constApp=()=>{constswipeRef=useRef(null);constbottomBarRef=useRef(null);const[currentSlideIdx,setSlideIdx]=useState(initialIndex);constonTabClick=useCallback(currentIndex=>{const{ getCurrentIndex, swipeToIndex }=swipeRef?.current??{};constpreviousIndex=getCurrentIndex();if(currentIndex!==previousIndex)swipeToIndex(currentIndex);},[]);consthandleSlideChange=currentIndex=>{setSlideIdx(currentIndex);};return(<div><divstyle={styles.parent}><divstyle={styles.tabsParent}><divstyle={styles.tabs}>{tabs.map((tab,idx)=>(<divkey={tab}onClick={()=>onTabClick(idx)}style={currentSlideIdx===idx
? styles.selectedTab
: styles.nonSelectedTab}>{tab}</div>))}</div><divref={bottomBarRef}style={styles.bottomBar}/></div><SwipeableWrapperref={swipeRef}initialIndex={initialIndex}onSlideChange={handleSlideChange}bottomBarRef={bottomBarRef}><divstyle={{ ...styles.slide, ...styles.slide1}}>1st slide</div><divstyle={{ ...styles.slide, ...styles.slide2}}>2nd slide</div><divstyle={{ ...styles.slide, ...styles.slide3}}>3rd slide</div></SwipeableWrapper></div></div>);};

SwipeableWrapper Props

Parameter	Type	Default	Description
bottomBarRef	React.RefObject<HTMLInputElement>	null	Ref applied on div that'll behave as bottom bar.
onSlideChange	function	() => {}	Each time a slide is changed, this function will be executed.
initialIndex	number	0	Index of the slide to be displayed on the initial mount.
filterNodes	Array	[]	Node identifiers that will not accept swipes.
transitionDuration	number	300	Duration of the transition.
transitionTimingFunction	string	ease-out	Timing function of the transition.
containerStyles	object	{}	Styles to override container styles.
disableAutoScroll	boolean	false	Disable auto scroll to top.
disableAutoAdjustHeight	boolean	false	Disable auto adjust height.

Functions

swipeToIndex: This function lets you switch between slides.

swipeRef.current.swipeToIndex(indexOfSlide);

getCurrentIndex: This function returns the index of the slide your are on.

constcurrentSlide=swipeRef.current.getCurrentIndex();

Note

initialIndex prop should be memoized or constant value.

onSlideChange function should be memoized.

License

This project is licensed under the terms of the MIT license.