# react-swipe-to-delete-ios

> A React Component that mimic the behavior of line deletion in iOS

Latest version **2.1.0** (published 2022-08-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-swipe-to-delete-ios
pnpm add react-swipe-to-delete-ios
yarn add react-swipe-to-delete-ios
bun add react-swipe-to-delete-ios
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2022-08-11 |
| First published | 2019-07-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 33.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 54 |
| Author | @arnaudambro |
| Maintainers | arnaudambro |
| Keywords | react, swipe to delete, swipeable, delete, ios |

## Links

- npm: https://www.npmjs.com/package/react-swipe-to-delete-ios
- Repository: https://github.com/arnaudambro/react-swipe-to-delete-ios
- Homepage: https://arnaudambro.github.io/react-swipe-to-delete-ios/
- Issues: https://github.com/arnaudambro/react-swipe-to-delete-ios/issues
- npm.io page: https://npm.io/package/react-swipe-to-delete-ios

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.1.0 (latest) — 2022-08-11
- 2.0.74 — 2022-08-11
- 2.0.73 — 2022-08-11
- 2.0.72 — 2022-08-11
- 2.0.71 — 2022-05-17
- 2.0.7 — 2022-05-17
- 2.0.6 — 2022-05-17
- 2.0.5 — 2022-05-17
- 2.0.4 — 2022-05-17
- 2.0.3 — 2022-05-17
- 2.0.1 — 2022-05-17
- 2.0.0 — 2022-05-17
- 1.0.11 — 2021-02-25
- 1.0.10 — 2021-02-25
- 1.0.8 — 2020-06-17
- … 8 more at https://npm.io/package/react-swipe-to-delete-ios/versions

## README

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

...

<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                                         |
| 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${deleting ? " deleting" : ""} ${className}`}>
  <div className={`delete${deleting ? " deleting" : ""}`}>
    <button>Delete</button>
  </div>
  <div className={`content${deleting ? " deleting" : ""}${!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

---
_Source: https://npm.io/package/react-swipe-to-delete-ios · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._