Nuclear Powered Macros

    @mohalla-tech/react-swipeable-wrapper

    1.1.4 • Public • Published

    react-swipeable-wrapper

    A React component for swipeable views.

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

    Installation

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

    Example

    Github Pages Demo

    Example

    Usage

    import React, { useCallback, useRef, useState } from "react";
    
    import SwipeableWrapper from "react-swipeable-wrapper";
    
    const tabs = ["Tab 1", "Tab 2", "Tab 3"];
    const initialIndex = 0;
    
    const styles = {
      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",
      },
    };
    
    const App = () => {
      const swipeRef = useRef(null);
      const bottomBarRef = useRef(null);
    
      const [currentSlideIdx, setSlideIdx] = useState(initialIndex);
    
      const onTabClick = useCallback(currentIndex => {
        const { getCurrentIndex, swipeToIndex } = swipeRef?.current ?? {};
        const previousIndex = getCurrentIndex();
        if (currentIndex !== previousIndex) swipeToIndex(currentIndex);
      }, []);
    
      const handleSlideChange = currentIndex => {
        setSlideIdx(currentIndex);
      };
    
      return (
        <div>
          <div style={styles.parent}>
            <div style={styles.tabsParent}>
              <div style={styles.tabs}>
                {tabs.map((tab, idx) => (
                  <div
                    key={tab}
                    onClick={() => onTabClick(idx)}
                    style={
                      currentSlideIdx === idx
                        ? styles.selectedTab
                        : styles.nonSelectedTab
                    }
                  >
                    {tab}
                  </div>
                ))}
              </div>
              <div ref={bottomBarRef} style={styles.bottomBar} />
            </div>
            <SwipeableWrapper
              ref={swipeRef}
              initialIndex={initialIndex}
              onSlideChange={handleSlideChange}
              bottomBarRef={bottomBarRef}
            >
              <div style={{ ...styles.slide, ...styles.slide1 }}>1st slide</div>
              <div style={{ ...styles.slide, ...styles.slide2 }}>2nd slide</div>
              <div style={{ ...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.

    const currentSlide = 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.

    Install

    npm i @mohalla-tech/react-swipeable-wrapper

    DownloadsWeekly Downloads

    6

    Version

    1.1.4

    License

    MIT

    Unpacked Size

    85 kB

    Total Files

    4

    Last publish

    Collaborators

    • kiranjavvajisc
    • vinodsai-a
    • amit_shukla
    • aloksingh3112
    • ashutoshtanwar
    • shivani-sehgal
    • ashishkothari
    • hdwivedi9
    • prarabdhb
    • shivamrr9
    • saketdiwakar
    • mohalla-tech-web
    • webos002
    • saurabhranjan
    • bhupali-sharechat