https://github.com/raineorshine/use-swipe-to-dismiss
A simple React hook to dismiss an element by swiping
https://github.com/raineorshine/use-swipe-to-dismiss
gesture react react-hook swipe-to-dismiss
Last synced: 3 months ago
JSON representation
A simple React hook to dismiss an element by swiping
- Host: GitHub
- URL: https://github.com/raineorshine/use-swipe-to-dismiss
- Owner: raineorshine
- License: isc
- Created: 2021-01-17T00:38:12.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-01-17T21:39:16.000Z (over 4 years ago)
- Last Synced: 2025-03-10T15:09:33.430Z (3 months ago)
- Topics: gesture, react, react-hook, swipe-to-dismiss
- Language: TypeScript
- Homepage:
- Size: 66.4 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# use-swipe-to-dismiss
[](https://npmjs.org/package/use-swipe-to-dismiss)
A simple React hook to dismiss an element by swiping, similar to mobile notifications.
Currently it only dismisses by swiping up, but let me know if you need it to work in a different direction and I can easily make it configurable.
## Features
- Touch compatible
- Exponential resistance to swiping in the opposite direction
- Snapback animation when dismiss is not completed
- Configure dismiss threshold in px or % of height
## Install
```sh
npm install --save use-swipe-to-dismiss
```
## Usage
```jsx
const useSwipeToDismiss = require('use-swipe-to-dismiss')
const AlertComponent = () => {
const [show, setShow] = useState(true)
const useSwipeToDismissProps = useSwipeToDismiss({
onDismiss: () => {
show(false)
}
})
return show
?
Alert!
: null
}
```
**Options**:
```js
{
// y offset at which onDismiss is fired, in px or % (of height)
// Default: '50%'
dismissThreshold?: string | number,
// dismiss handler
onDismiss?: () => void,
// dismiss after animating element off screen
onDismissEnd?: () => void,
// time in seconds to animate the element back into place after releasing
// Default: 0.1
snapbackDuration?: number,
// easing function to animate the element back into place after releasing
// Default: ease-out
snapbackEasing?: string,
}
```
## Tips
- The hook state will not reset on its own, so if the component seems to be dismissed permanently, you may need to force it to re-mount by giving it a `key`.
## Thanks
Inspired by https://github.com/hosembafer/react-swipe-to-dismiss