react-swipe-to-delete-ios

A simple React component to reproduce the way iOS deletes an item in a list. 0 dependency. 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

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.

<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