A React Component that mimic the behavior of line deletion in iOS
npm install react-swipe-to-delete-iosA simple React component to reproduce the way iOS deletes an item in a list. 0 dependency.
Demo
Config very much insipred by this post
```
npm i --save react-swipe-to-delete-ios
``
yarn add react-swipe-to-delete-ios
`js
import React from 'react'
import SwipeToDelete from 'react-swipe-to-delete-ios'
...
// optional
height={50} // default
transitionDuration={250} // default
deleteWidth={75} // default
deleteThreshold={75} // default
showDeleteAction={true} //default
deleteColor="rgba(252, 58, 48, 1.00)" // default
deleteText="Delete" // default
deleteComponent={
disabled={false} // default
id="swiper-1" // not default
className="my-swiper" // not default
rtl={false} // default
onDeleteConfirm={(onSuccess, onCancel) => {
// not default - default is null
if (window.confirm("Do you really want to delete this item ?")) {
onSuccess();
} else {
onCancel();
}
}}
>
{children}
`
| Prop | Type | Default |
| ------------------ | ----------- | ------------------------------------------ |
| onDelete | function | _required_ |
| onDeleteConfirm | function | null |
| height | number | 50 |
| transitionDuration | number (ms) | 250 |
| deleteWidth | number (px) | 75 |
| deleteThreshold | number (%) | 75 |
| showDeleteAction | bool | true |
| deleteColor | string | "rgba(252, 58, 48, 1.00)" |
| deleteText | string | "Delete" (_deleteText or deleteComponent_) |
| deleteComponent | node | null (_deleteText or deleteComponent_) |
| disabled | bool | false |
| rtl | bool | false |
| id | string | '' |
| className | string | '' |
Knowing the Component structure might help you customise with your own CSS.
`jsx`rstdi${deleting ? " deleting" : ""} ${className}}>
delete${deleting ? " deleting" : ""}}>
content${deleting ? " deleting" : ""}${!touching ? " transition" : ""}}>
{children}
rewrite the whole library:
- remove styled-components - 0 dependencyheight
- rewrite in Hooks
- is now optionalREADME
- update onDeleteConfirm
- is now in productionclassName
- new props and id`
- React > 16.18 (with Hooks) as peerDependencies