react-swipe-to-delete-component
v1.0.8
Published
A simple React component implement 'swipe to delete' UI-pattern.
Downloads
1,421
Maintainers
Readme
React-swipe-to-delete-component
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.
Example
You may see an example here.
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 => (
<SwipeToDelete key={item.id}>
<a className="list-group-item">
<h4 className="list-group-item-heading">{item.date}</h4>
<p className="list-group-item-text">{item.text}</p>
</a>
</SwipeToDelete>
));
const app = (
<div className="list-group">
{list}
</div>
);
render(app, document.getElementById('root'));
Props
- 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
<SwipeToDelete />
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
<SwipeToDelete />
component. Optional. - onRight/onLeft - This is a function. If a content component is swiped then these functions is called. Optional.
Styles
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.