Home

Awesome

react-swipe-to-delete-ios

Version

A simple React component to reproduce the way iOS deletes an item in a list. 0 dependency. Demo

GIF 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

PropTypeDefault
onDeletefunctionrequired
onDeleteConfirmfunctionnull
heightnumber50
transitionDurationnumber (ms)250
deleteWidthnumber (px)75
deleteThresholdnumber (%)75
showDeleteActionbooltrue
deleteColorstring"rgba(252, 58, 48, 1.00)"
deleteTextstring"Delete" (deleteText or deleteComponent)
deleteComponentnodenull (deleteText or deleteComponent)
disabledboolfalse
rtlboolfalse
idstring''
classNamestring''

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: