A simple React component implement 'swipe to delete' UI-pattern.
npm install 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.
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