react-swipe-row v0.1.0

Swipe Row

A React component implement swipe to show actions.

Development

npm install
npm start

or use storybook

npm run storybook

then swipe the row by mobile dev tool!

Usage

import SwipeRow from 'SwipeRow'

const rowId = 1

<SwipeRow
  rowId={rowId}
  onTouchStart={(e, { x, y, move, offset, ...rest }) => {}}
  rightButtons={[
    <div style={{padding: '12px', background: 'blue'}}>Delete</div>,
    <div style={{padding: '12px', background: 'red'}}>Delete</div>,
    <div style={{padding: '12px', background: 'yellow'}}>Delete</div>
  ]}
  leftButtons={[
    <div style={{padding: '12px', background: 'gray'}}>Mute</div>,
    <div style={{padding: '12px', background: 'pink'}}>Mute</div>
  ]}
  disableSwipeLeft
>
  <div style={{background: '#fff', padding: '12px', textAlign: 'center'}}>
    example {rowId.toString()}
  </div>
</SwipeRow>

API

SwipeRow

Event Props

onTouchStart, onTouchMove and onTouchEnd are the callback event with corresponding event as the first parameter and the state of each threshold as the second parameter.