Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marekrozmus/react-swipeable-list
Swipeable list component for React supporting several behaviours (e.g. iOS)
https://github.com/marekrozmus/react-swipeable-list
android component ios javascript list listview mobile react swipe swipe-actions swipe-to-delete swipeable touchscreen
Last synced: about 2 months ago
JSON representation
Swipeable list component for React supporting several behaviours (e.g. iOS)
- Host: GitHub
- URL: https://github.com/marekrozmus/react-swipeable-list
- Owner: marekrozmus
- License: mit
- Created: 2021-02-04T13:49:33.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-11T18:31:01.000Z (2 months ago)
- Last Synced: 2024-10-23T01:25:30.170Z (about 2 months ago)
- Topics: android, component, ios, javascript, list, listview, mobile, react, swipe, swipe-actions, swipe-to-delete, swipeable, touchscreen
- Language: JavaScript
- Homepage: https://marekrozmus.github.io/react-swipeable-list/
- Size: 2.21 MB
- Stars: 113
- Watchers: 5
- Forks: 20
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components - react-swipeable-list - [demo](https://marekrozmus.github.io/react-swipeable-list/) - Configurable component to render list with swipeable items. (UI Components / Miscellaneous)
- awesome-react-components - react-swipeable-list - [demo](https://marekrozmus.github.io/react-swipeable-list/) - Configurable component to render list with swipeable items. (UI Components / Miscellaneous)
- fucking-awesome-react-components - react-swipeable-list - 🌎 [demo](marekrozmus.github.io/react-swipeable-list/) - Configurable component to render list with swipeable items. (UI Components / Miscellaneous)
README
react-swipeable-list
A configurable react component to render list with swipeable items.
Demo •
Installation •
Usage
You like it?
[Buy me a coffee :)](https://www.buymeacoffee.com/froostrat) or a 🍺
[](https://github.com/marekrozmus/react-swipeable-list/actions)
[](https://codecov.io/gh/marekrozmus/react-swipeable-list)
[](#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/)
[](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!