react-swipeable-list

A configurable react component to render list with swipeable items.

You like it? [Buy me a coffee :)](https://www.buymeacoffee.com/froostrat) or a 🍺

[![Actions Status](https://github.com/marekrozmus/react-swipeable-list/workflows/Node.js%20CI/badge.svg)](https://github.com/marekrozmus/react-swipeable-list/actions) [![codecov](https://codecov.io/gh/marekrozmus/react-swipeable-list/branch/main/graph/badge.svg?token=8P4356I2J0)](https://codecov.io/gh/marekrozmus/react-swipeable-list) ![GitHub Release Date](https://img.shields.io/github/release-date/marekrozmus/react-swipeable-list) [![All Contributors](https://img.shields.io/badge/all_contributors-12-orange.svg?style=flat-square)](#contributors-) ## React Swipeable List component A react component to render list with swipeable items. Items can have one or more actions on left (leading) and right (trailing) swipe and different behavior depending on props. [See examples](#type) This repository contains new version of [sandstreamdev/react-swipeable-list/](https://github.com/sandstreamdev/react-swipeable-list). Whole component was reimplemented to support buttons in revealed content and different swipe behaviors. More information can be found in this issue: [Clarify relationship with @sandstreamdev/react-swipeable-list](https://github.com/marekrozmus/react-swipeable-list/issues/6) ## Demo Check [working example page](https://marekrozmus.github.io/react-swipeable-list/) [![Edit react-swipeable-list](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/marekrozmus/react-swipeable-list/tree/main/examples) ## Installation ```bash npm install react-swipeable-list # or via yarn yarn add react-swipeable-list ``` ## Usage ```jsx import { LeadingActions, SwipeableList, SwipeableListItem, SwipeAction, TrailingActions, } from 'react-swipeable-list'; import 'react-swipeable-list/dist/styles.css'; const leadingActions = () => ( console.info('swipe action triggered')}> Action name ); const trailingActions = () => ( console.info('swipe action triggered')} > Delete ); Item content ; ``` ## SwipeableList Props ### actionDelay Type: `milliseconds` (optional, default: `0`) Time in milliseconds after which swipe action and animation should be called after trigggering swipe action. It can be set for the whole list or for every item. See `actionDelay` for `SwipeableListItem`. Value from the `SwipeableListItem` takes precedence. ### fullSwipe Type: `boolean` (optional, default: `false`) Changes behavior of `IOS` list type. When `true` and swipe is done beyond `threshold` and released the action is triggered.

When set to `false` actions are only opened and they need to be clicked to trigger action.

### destructiveCallbackDelay Type: `milliseconds` (optional, default: `1000`) Time in milliseconds after which swipe action should be called for `destructive` swipe action (item deletion). It can be set for the whole list or for every item. See `destructiveCallbackDelay` for `SwipeableListItem`. Value from the `SwipeableListItem` takes precedence. ### style Type: `object` (optional, default: `undefined`) Additional styles for list tag. ### type Type: `ListType (ANDROID | IOS | MS)` (optional, default: `ANDROID`) Changes behavior of swipeable items. #### `ANDROID`

#### `IOS`

#### `MS`

### Tag Type: `string` (optional, default: `div`) HTML tag that is used to create this component. ### scrollStartThreshold Type: `number` (optional, default: `10`) How far in pixels scroll needs to be done to block swiping. After scrolling is started and goes beyond the threshold, swiping is blocked. It can be set for the whole list or for every item. See `scrollStartThreshold` for `SwipeableListItem`. Value from the `SwipeableListItem` takes precedence. ### swipeStartThreshold Type: `number` (optional, default: `10`) How far in pixels swipe needs to be done to start swiping on list item. After a swipe is started and goes beyond the threshold, scrolling is blocked. It can be set for the whole list or for every item. See `swipeStartThreshold` for `SwipeableListItem`. Value from the `SwipeableListItem` takes precedence. ### threshold Type: `number` (optional, default: `0.5`) 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. It can be set for the whole list or for every item. See `threshold` for `SwipeableListItem`. Value from the `SwipeableListItem` takes precedence. ## SwipeableListItem Props ### actionDelay Type: `milliseconds` (optional, default: `0`) Time in milliseconds after which swipe action and animation should be called after trigggering swipe action. It can be set for the whole list or for every item. See `actionDelay` for `SwipeableList`. Value from the `SwipeableListItem` takes precedence. ### blockSwipe Type: `boolean` (optional, default: `false`) If set to `true` all defined swipe actions are blocked. ### destructiveCallbackDelay Type: `milliseconds` (optional, default: `1000`) Time in milliseconds after which swipe action should be called for `destructive` swipe action (item deletion). It can be set for the whole list or for every item. See `destructiveCallbackDelay` for `SwipeableList`. Value from the `SwipeableListItem` takes precedence. ### leadingActions Type: `LeadingActions component` Container component that sets up correct props in `SwipeAction`. See examples for usage. ### maxSwipe Type: 'number' (optional, default: `1.0`) Limit the swipe to percent of width, e.g.: `0.5` will make swipe possible only for 50% of elements's width ### onClick Type: `function` (optional) Callback function that should be call after list item is clicked. ### onSwipeStart Type: `(dragDirection: string) => void` Fired after swipe has started (after drag gesture passes the `swipeStartThreshold` distance in pixels). `dragDirection` can have value of `left` or `right`. ### onSwipeEnd Type: `(dragDirection: string) => void` Fired after swipe has ended. `dragDirection` can have value of `left` or `right`. ### onSwipeProgress Type: `(progress: number, dragDirection: string) => void` Fired every time swipe progress changes. The reported `progress` value is always an integer in range 0 to 100 inclusive. `dragDirection` can have value of `left` or `right`. ### scrollStartThreshold Type: `number` (default: `10`) How far in pixels scroll needs to be done to block swiping. After scrolling is started and goes beyond the threshold, swiping is blocked. It can be set for the whole list or for every item. See `scrollStartThreshold` for `SwipeableList`. Value from the `SwipeableListItem` takes precedence. ### swipeStartThreshold Type: `number` (default: `10`) How far in pixels swipe needs to be done to start swiping on list item. After a swipe is started and goes beyond the threshold, scrolling is blocked. It can be set for the whole list or for every item. See `swipeStartThreshold` for `SwipeableList`. Value from the `SwipeableListItem` takes precedence. ### threshold Type: `number` (default: `0.5`) How far swipe needs to be done to trigger action. `0.5` means that item needs to be swiped to half of its width, `0.25` - one-quarter of width. It can be set for the whole list or for every item. See `threshold` for `SwipeableList`. Value from the `SwipeableListItem` takes precedence. ### trailingActions Type: `TrailingActions component` Container component that sets up correct props in `SwipeAction`. See examples for usage. ## SwipeAction Props ### destructive Type: `boolean` (optional, default: `false`) If set to `true` then remove animation is played and callback is called after `destructiveCallbackDelay`. ### onClick Type: `function` (required) Callback function that should be call after swipe action is triggered. ### Tag Type: `string` (optional, default: `span`) HTML tag that is used to create this component. ## Contributors ✨ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

_{Marek Rozmus} 💻 📖 ⚠️ 💡 🤔 🚧 🎨	_{Adam Laycock} 🐛	_{Rathes Sachchithananthan} 🤔	_Niels 🤔	_{Glenn Harris} 🚧	_{Zdorovtsev Viktor} 🤔	_{Zakaria EL Mesaoudi} 💻
_{Aron Rotteveel} 💻	_{Lucas Furini} 🤔	_{Canberk Akartuna} 🐛	_{Raul Escobar} 🐛	_Starly26 🐛

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!