useVerticalSwipeMinimum

useVerticalSwipeMinimum is a React hook that allows you to detect vertical swiping gestures with a minimum threshold. It's a part of the @1ohooks/swipeable package and provides a simple way to respond to vertical swipe actions in your components.

Installation

To use useVerticalSwipeMinimum, you'll need to have React and the required swipe-related hooks installed in your project. You can add them to your project using npm or yarn:

npm install react
npm install @1ohooks/use-vertical-swipe-minimum
# or
yarn add react
yarn add @1ohooks/use-vertical-swipe-minimum

Usage

You can import useVerticalSwipeMinimum in your components like this:

import { useVerticalSwipeMinimum } from '@1ohooks/use-vertical-swipe-minimum';

useVerticalSwipeMinimum accepts a few optional parameters:

- `minSwipe` (number): The minimum swipe distance required to trigger a swipe action (default is 50 pixels). - `onSwipeUp` (function): A callback function to be executed when a swipe up gesture is detected. - `onSwipeDown` (function): A callback function to be executed when a swipe down gesture is detected. Here's an example of how to use useVerticalSwipeMinimum in your component:

import React from 'react';
import { useVerticalSwipeMinimum } from '@1ohooks/use-vertical-swipe-minimum';

const MyComponent = () => {
  const handleSwipeUp = () => {
    // Handle swipe up action here
  };

  const handleSwipeDown = () => {
    // Handle swipe down action here
  };

  useVerticalSwipeMinimum(50, handleSwipeUp, handleSwipeDown);

  return (
    <div>
      {/* Your component content */}
    </div>
  );
};

export default MyComponent;

This code snippet demonstrates how to use useVerticalSwipeMinimum to detect vertical swipes and trigger custom actions when swipes occur.

Contributing

Contributions are welcome! If you have suggestions, bug reports, or would like to contribute code, please visit the GitHub repository for @1ohooks/swipeable.

License

This package is licensed under the ISC License. Please refer to the LICENSE file for details.