# gedditlocal-react-deck-swiper

> React.js tinder-like swipeable component

Latest version **0.1.0** (published 2021-05-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install gedditlocal-react-deck-swiper
pnpm add gedditlocal-react-deck-swiper
yarn add gedditlocal-react-deck-swiper
bun add gedditlocal-react-deck-swiper
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2021-05-24 |
| First published | 2021-05-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 423 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Pedro Bini |
| Maintainers | pomeloproductions |
| Keywords | react, tinder, swipe, swipeable, card, deck, swiper, swipy |

## Links

- npm: https://www.npmjs.com/package/gedditlocal-react-deck-swiper
- Repository: https://github.com/smallshopsunited/react-deck-swiper
- Homepage: https://github.com/smallshopsunited/react-deck-swiper#readme
- Issues: https://github.com/smallshopsunited/react-deck-swiper/issues
- npm.io page: https://npm.io/package/gedditlocal-react-deck-swiper

## Dependencies (1)

- [react-spring](https://npm.io/package/react-spring.md) ^8.0.27

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2021-05-24

## README

# React Deck Swiper

[![NPM](https://img.shields.io/npm/v/react-deck-swiper.svg)](https://www.npmjs.com/package/react-deck-swiper) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

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

![Preview](https://media.giphy.com/media/US0kvefmSueoiIpZwU/giphy.gif)

## Preview

Online example [here](https://jungsoft.github.io/react-deck-swiper/).

## Install

You can use `yarn` or `npm`.


### Yarn

```bash
yarn add react-deck-swiper
```

### npm

```bash
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

Name | Type | Required | Default value | Description
:--- | :--- | :--- | :--- | :---
`children` | `React.ReactChild` | _required_ | - | component that will be swipeable
`onBeforeSwipe` | `(forceSwipe, cancelSwipe, direction) => void` | _optional_ | `undefined` | callback executed on swipe start
`onSwipe` | `(direction) => void` | _optional_ | `undefined` | callback executed on swipe end
`onAfterSwipe` | `() => void` | _optional_ | `undefined` | callback executed right after onSwipe end
`onOpacityChange` | `(opacity) => void` | _optional_ | `undefined` | callback executed when the card opacity changes on swipe
`wrapperHeight` | `string` | _optional_ | `100%` | `height` prop for swipeable wrapper
`wrapperWidth` | `string` | _optional_ | `100%` | `width` prop for swipeable wrapper
`swipeThreshold` | `number` | _optional_ | `120` | offset in px swiped to consider as swipe
`fadeThreshold` | `number` | _optional_ | `40` | offset when opacity fade should start
`renderButtons` | `({right, left}) => React.Component` | _optional_ | `undefined` | function 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](https://github.com/jungsoft/react-deck-swiper/issues/new) so we can talk about it 💬.

## License

MIT

## Special Thanks

Thanks to [goncy](https://github.com/goncy/) for the first version of this lib.

Made with ❤️ by [Pedro Bini](https://github.com/pedro-lb/) @ [Jungsoft](https://jungsoft.io/).

---
_Source: https://npm.io/package/gedditlocal-react-deck-swiper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._