# 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' ... } // 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

{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

react-swipe-to-delete-ios

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past