1.0.9 • Published 4 years ago

react-deck-swiper v1.0.9

Weekly downloads
72
License
ISC
Repository
github
Last release
4 years ago

React Deck Swiper

NPM JavaScript Style Guide

This is a simple React module that introduces a tinder-like swipeable component.

Preview

Preview

Online example here.

Install

You can use yarn or npm.

Yarn

yarn add react-deck-swiper

npm

npm install --save react-deck-swiper

Usage

import * as React from 'react';

import { Swipeable, direction } from 'react-deck-swiper';

const Component = () => {
  const handleOnSwipe = (swipeDirection) => {
    if (swipeDirection === direction.RIGHT) {
      // handle right swipe
      return;
    }

    if (swipeDirection === direction.LEFT) {
      // handle left swipe
      return;
    }
  }

  return (
    <Swipeable onSwipe={handleOnSwipe}>
      <div className="card">
        Your card content here
      </div>
    </Swipeable>
  );
};

export default Component;

Props

NameTypeRequiredDefault valueDescription
childrenReact.ReactChildrequired-component that will be swipeable
onBeforeSwipe(forceSwipe, cancelSwipe, direction) => voidoptionalundefinedcallback executed on swipe start
onSwipe(direction) => voidoptionalundefinedcallback executed on swipe end
onAfterSwipe() => voidoptionalundefinedcallback executed right after onSwipe end
onOpacityChange(opacity) => voidoptionalundefinedcallback executed when the card opacity changes on swipe
wrapperHeightstringoptional100%height prop for swipeable wrapper
wrapperWidthstringoptional100%width prop for swipeable wrapper
swipeThresholdnumberoptional120offset in px swiped to consider as swipe
fadeThresholdnumberoptional40offset when opacity fade should start
renderButtons({right, left}) => React.Componentoptionalundefinedfunction to render buttons to force swipes

Contributing

Pull requests are welcome! If you have any feedback, issue or suggestion, feel free to open a new issue so we can talk about it 💬.

License

MIT

Special Thanks

Thanks to goncy for the first version of this lib.

Made with ❤️ by Pedro Bini @ Jungsoft.

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago