/react-swipe-to-delete-ios

A simple React component to reproduce the way iOS deletes an item in a list

Primary LanguageTypeScript

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

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