Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arnaudambro/react-swipe-to-delete-ios
A simple React component to reproduce the way iOS deletes an item in a list
https://github.com/arnaudambro/react-swipe-to-delete-ios
Last synced: about 2 months ago
JSON representation
A simple React component to reproduce the way iOS deletes an item in a list
- Host: GitHub
- URL: https://github.com/arnaudambro/react-swipe-to-delete-ios
- Owner: arnaudambro
- Created: 2019-07-07T11:37:08.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T03:50:50.000Z (almost 2 years ago)
- Last Synced: 2024-04-25T22:02:54.257Z (8 months ago)
- Language: TypeScript
- Homepage: https://arnaudambro.github.io/react-swipe-to-delete-ios/
- Size: 2.01 MB
- Stars: 44
- Watchers: 2
- Forks: 16
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-react-components - react-swipe-to-delete-ios - [demo](https://arnaudambro.github.io/react-swipe-to-delete-ios/) - To delete an item in a list the same way iOS does. (UI Components / Miscellaneous)
- awesome-react-components - react-swipe-to-delete-ios - [demo](https://arnaudambro.github.io/react-swipe-to-delete-ios/) - To delete an item in a list the same way iOS does. (UI Components / Miscellaneous)
- awesome-react-components - react-swipe-to-delete-ios - [demo](https://arnaudambro.github.io/react-swipe-to-delete-ios/) - To delete an item in a list the same way iOS does. (UI Components / Miscellaneous)
- awesome-react-components - react-swipe-to-delete-ios - [demo](https://arnaudambro.github.io/react-swipe-to-delete-ios/) - To delete an item in a list the same way iOS does. (UI Components / Miscellaneous)
- fucking-awesome-react-components - react-swipe-to-delete-ios - 🌎 [demo](arnaudambro.github.io/react-swipe-to-delete-ios/) - To delete an item in a list the same way iOS does. (UI Components / Miscellaneous)
README
# react-swipe-to-delete-ios
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)
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'
...
} // 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
Delete
{children}
```
## 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