react-swipe-to-delete-ios
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.0 • Public • Published

    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

    Install

    npm i react-swipe-to-delete-ios

    DownloadsWeekly Downloads

    765

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    34.6 kB

    Total Files

    25

    Last publish

    Collaborators

    • arnaudambro