npm package: @reyzitwo/react-swipe-to-delete-ios
Description: [FORK] A React Component that mimic the behavior of line deletion in iOS
Author: reyzitwo
Latest version: 1.0.5

# react-swipe-to-delete-ios

![Version](https://img.shields.io/badge/version-2.1.0-blue)

A simple React component to reproduce the way iOS deletes an item in a list. 0 dependency.
[Demo](https://arnaudambro.github.io/react-swipe-to-delete-ios)

![GIF Demo](./demo.gif?raw=true "Title")

Config very much insipred by [this post](https://dev.to/alexeagleson/how-to-create-and-publish-a-react-component-library-2oe)

## Installation

```
npm i --save @reyzitwo/react-swipe-to-delete-ios
```

```
yarn add @reyzitwo/react-swipe-to-delete-ios
```

## Usage

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

...

<SwipeToDelete
  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={<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}
</SwipeToDelete>
```

## Props

| Prop                | Type        | Default                                    |
|---------------------|-------------|--------------------------------------------|
| **onDelete**        | function    | _required_                                 |
| onDeleteConfirm     | function    | null                                       |
| height              | number      | 50                                         |
| transitionDuration  | number (ms) | 250                                        |
| deleteWidth         | number (px) | 75                                         |
| deleteThreshold     | number (%)  | 75                                         |
| lengthChildrens     | number      | 0                                          |
| 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
<div id={id} className={`rstdi ${className}`}>
  <div className={`delete`}>
    <button>Delete</button>
  </div>
  <div className={`content${!touching ? " transition" : ""}`}>
    {children}
  </div>
</div>
```

## Changelog

### v2

rewrite the whole library:

- remove `styled-components` - 0 dependency
- rewrite in Hooks
- `height` is now optional
- update `README`
- `onDeleteConfirm` is now in production
- new props `className` and `id`
- React > 16.18 (with Hooks) as peerDependencies