react-swipe-to-delete-ios

!Version

A simple React component to reproduce the way iOS deletes an item in a list. 0 dependency.
Demo

!GIF Demo

Config very much insipred by this post

Installation

``
npm i --save react-swipe-to-delete-ios
`

`
yarn add react-swipe-to-delete-ios
`

Usage

`js
import React from 'react'
import SwipeToDelete from 'react-swipe-to-delete-ios'

...

onDelete={handleDelete} // required
// 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={} // not default
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}

`

Props

| 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 | '' |

Component structure

Knowing the Component structure might help you customise with your own CSS.

`jsx