swipe

Swipeable list component for React

Sep 23, 2019
Swipeable list component for React

react-swipeable-list

Swipeable list component for React.

View demo View Github

React Swipeable List component

A control to render list with swipeable items. Items can have action on left and right swipe. Swipe action triggering can be configured.

Installation

npm install sandstreamdev/react-swipeable-list # or via yarn yarn add sandstreamdev/react-swipeable-list

Usage

<SwipeableList> <SwipeableListItem swipeLeft={{ content: <div>Revealed content during swipe</div>, action: () => console.info('swipe action triggered') }} swipeRight={{ content: <div>Revealed content during swipe</div>, action: () => console.info('swipe action triggered') }} > <div>Item name</div> </SwipeableListItem> </SwipeableList>

NOTE: SwipeableListItem can be used without SwipeableList but swipe blocking on scroll needs to be handled.

SwipeableList Props

threshold

Type: number

How far swipe needs to be done to trigger attached action. 0.5 means that item needs to be swiped to half of its width, 0.25 - one-quarter of width.

SwipeableListItem Props

blockSwipe

Type: boolean (default: false)

If set to true all defined swipe actions are blocked. This is done by SwipeableList during scroll to prevent mouse move events to cause accidental swiping acitions.

swipeLeft

Type: Object

Data for defining left swipe action and rendering content after item is swiped. The object requires following structure:

{ action, // required: swipe action (function) content, // required: HTML or React component }

swipeRight

Type: Object

Same as swipeLeft but to right. :wink:

threshold

Type: number (default: 0.5)

Can be set for whole list or for every item. See threshold for SwipeableList.

GitHub

Recommended