React-swipe-to-delete-component


[//]: # ( [](https://github.com/gaer87/react-swipe-to-delete-component/actions))

A simple React component implement 'swipe to delete' UI-pattern.

Install

React-swipe-to-delete-component is available via npm.
``
npm install react-swipe-to-delete-component
`

Usage

The React-swipe-to-delete-component wrap your a content component. It's become swiped. If it's swiped more certain percent than the swipe-to-delete-component will remove a component.

$3

You may see an example here.
`js
import React from 'react';
import { render } from 'react-dom';
// Import the react-swipe-to-delete-component
import SwipeToDelete from 'react-swipe-to-delete-component';
// Import styles of the react-swipe-to-delete-component
import 'react-swipe-to-delete-component/dist/swipe-to-delete.css';

const data = [
{id: 1, text: 'End of summer reading list', date: '1.03.2016'},
{id: 2, text: 'Somewhere in the middle 📸', date: '23.01.2017'},
{id: 3, text: 'Good morning to 9M of you?!?! ❤️🙏🏻Feeling very grateful and giddy.', date: '12.01.2022'}
];

const list = data.map(item => (

{item.date}

{item.text}

));

const app = (

{list}

);

render(app, document.getElementById('root'));
`

$3


- tag - This is tag name of a root element. By default, it's "div". Optional.
- classNameTag - This is classes of a root element. Optional.
- background - This is a decoration component under a content component. By default, showed red element with trash icons. Optional.
- deleteSwipe - This is a number. If a content component is swiped more this the number than a swipe-to-delete component will start a delete animation. By default, it's equal "0.5". Optional.
- onDelete - This is a function. If a content component is deleted then it will be called. It receives custom props from a component. Optional.
- onCancel - This is a function. If a content component isn't deleted then it will be called. It receives custom props from a ` component. Optional.
- onRight/onLeft - This is a function. If a content component is swiped then these functions is called. Optional.

$3

The class js-content is content region, js-delete is delete region. Classes js-transition-delete-right and js-transition-delete-left are added on a content component when it's swiped more than "deleteSwipe" options. Class js-transition-cancel is added when a content component swiped less than "deleteSwipe" options. Animations are made by CSS3 transition.

Changes

See the CHANGELOG.

Contributing

From opening a bug report to creating a pull request: every contribution is appreciated and welcome. If you're planing to implement a new feature or change the api please create an issue first.

License

MIT