react-pre-hooksuseSwiping
You can handle the user swipe actions using this hook, and it can also handle the mouse swipes.
Parameters
- the swipe action handler function that takes the SwipeAction object as a parameter.
- the swipe options:
| Name | Type | Description |
|---|---|---|
| ref | RefObject | the container element reference (default is window). |
Return Values
a ref object of the target element.
SwipeAction Object
| Name | Type | Description |
|---|---|---|
| type | String | the swipe type which can be start, end, or moving. |
| deltaX | Number | the swipe distance x from the initialX value. |
| deltaY | Number | the swipe distance y from the initialY value. |
| initialX | Number | the initial x position. |
| initialY | Number | the initial y position. |
| event | Event | the TouchEvent or MouseEvent if you are using the mouse property. |
Example Usage
tsx
import { useSwiping } from 'react-pre-hooks';
let start = 0;
export default function Slider() {
const ref = useSwiping(action => {
if (action.type === 'start') start = window.scrollY;
window.scrollTo({ top: start + action.deltaY });
});
return (
<div ref={ref}>
<p>Swipe to the left!</p>
<ul>
{new Array(10).fill(null).map((_, i) => (
<li key={i}>{i}</li>
))}
</ul>
</div>
);
}import { useSwiping } from 'react-pre-hooks';
let start = 0;
export default function Slider() {
const ref = useSwiping(action => {
if (action.type === 'start') start = window.scrollY;
window.scrollTo({ top: start + action.deltaY });
});
return (
<div ref={ref}>
<p>Swipe to the left!</p>
<ul>
{new Array(10).fill(null).map((_, i) => (
<li key={i}>{i}</li>
))}
</ul>
</div>
);
}