{"_id":"@1ohooks/use-swipe","_rev":"1-c3431b79f029f6fce6d9f1a9cca0443a","name":"@1ohooks/use-swipe","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@1ohooks/use-swipe","version":"0.1.0","main":"dist/packages/useSwipe/src/index.js","types":"dist/packages/useSwipe/src/index.d.ts","scripts":{"build":"tsc && copyfiles -u 1 src/**/*.{scss,png,jpg} dist/"},"keywords":[],"author":"","license":"ISC","_id":"@1ohooks/use-swipe@0.1.0","_nodeVersion":"18.14.2","_npmVersion":"9.5.1","dist":{"integrity":"sha512-5EjYUsQs1VBM8EkNk8TB74Vv7COLxthQA4bvsjYYmG478WNy0sVnEhGte2Fa5HxvNRdMLCJDoFcGU7sNzArcrQ==","shasum":"97cf6a8a92f71e80fd34da6e336a3d8c93bf01a6","tarball":"https://registry.npmjs.org/@1ohooks/use-swipe/-/use-swipe-0.1.0.tgz","fileCount":7,"unpackedSize":4827,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMR3jMCiU/mJ1geHHzLY/Tyd2RIAuEaEg1ZQvBXj744QIhALlz7iiiXydpiWaXttYmXtmbR+OwGxlQuQUV/DMFspom"}]},"_npmUser":{"name":"1ojames","email":"jameshuntdevelopment@gmail.com"},"directories":{},"maintainers":[{"name":"1ojames","email":"jameshuntdevelopment@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-swipe_0.1.0_1695583203461_0.05266382751893506"},"_hasShrinkwrap":false},"0.1.1":{"name":"@1ohooks/use-swipe","version":"0.1.1","main":"dist/packages/useSwipe/src/index.js","types":"dist/packages/useSwipe/src/index.d.ts","scripts":{"build":"tsc && copyfiles -u 1 src/**/*.{scss,png,jpg} dist/"},"keywords":[],"author":"","license":"ISC","description":"<h1>useSwipe</h1>","_id":"@1ohooks/use-swipe@0.1.1","_nodeVersion":"18.14.2","_npmVersion":"9.5.1","dist":{"integrity":"sha512-yMtM6sFR43Zsv20JBQrnuW66CJ9a4J/LZr5k/bTuxNkvU4XC1p9SHB4jPgkd4Vh++lfrxQuK1aO7RI7L4SFbJA==","shasum":"b77bd4838d55d4971faa429c01fe468b68db1972","tarball":"https://registry.npmjs.org/@1ohooks/use-swipe/-/use-swipe-0.1.1.tgz","fileCount":8,"unpackedSize":8021,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDO8NnHYi/EEHsnYzI2uApq1vijDvkJ5reE1JnA15is+QIhAIsDxean9cz/WpU0UIkVr4HPOvghEyPzaT9A0Zp6omu5"}]},"_npmUser":{"name":"1ojames","email":"jameshuntdevelopment@gmail.com"},"directories":{},"maintainers":[{"name":"1ojames","email":"jameshuntdevelopment@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-swipe_0.1.1_1695588284836_0.6834531837209985"},"_hasShrinkwrap":false}},"time":{"created":"2023-09-24T19:20:03.335Z","0.1.0":"2023-09-24T19:20:03.673Z","modified":"2023-09-24T20:44:45.222Z","0.1.1":"2023-09-24T20:44:45.006Z"},"maintainers":[{"name":"1ojames","email":"jameshuntdevelopment@gmail.com"}],"keywords":[],"license":"ISC","readme":"<h1>useSwipe</h1>\n\n<p><code>useSwipe</code> is a versatile React hook that enables you to detect swipe gestures with various configuration options. It provides a straightforward way to respond to swipes in your components. This hook is part of the <code>@1ohooks/swipeable</code> package.</p>\n\n<h2>Installation</h2>\n\n<p>To use <code>useSwipe</code>, you'll need to have React installed in your project. You can add it to your project using npm or yarn:</p>\n\n<pre><code>npm install react\n# or\nyarn add react\n</code></pre>\n\n<p>Next, install <code>@1ohooks/swipeable</code>:</p>\n\n<pre><code>npm install @1ohooks/use-swipe\n# or\nyarn add @1ohooks/use-swipe\n</code></pre>\n\n<h2>Usage</h2>\n\n<p>You can import <code>useSwipe</code> in your components like this:</p>\n\n<pre><code>import { useSwipe } from '@1ohooks/use-swipe';\n</code></pre>\n\n<p><code>useSwipe</code> accepts a configuration object with the following optional properties:</p>\n\n- `onSwipeLeft` (function): A callback function to be executed when a swipe left gesture is detected.\n- `onSwipeRight` (function): A callback function to be executed when a swipe right gesture is detected.\n- `onSwipeUp` (function): A callback function to be executed when a swipe up gesture is detected.\n- `onSwipeDown` (function): A callback function to be executed when a swipe down gesture is detected.\n- `threshold` (number): The minimum swipe distance required to trigger a swipe action (default is 50 pixels).\n- `maxDuration` (number): The maximum duration (in milliseconds) for a swipe gesture to be recognized (default is 500 milliseconds).\n- `preventDefault` (boolean): Whether to prevent the default behavior of touch events (default is false).\n\nHere's an example of how to use <code>useSwipe</code> in your component:</p>\n\n<pre><code>import React from 'react';\nimport { useSwipe } from '@1ohooks/use-swipe';\n\nconst MyComponent = () =&gt; {\n  const handleSwipeLeft = () =&gt; {\n    // Handle swipe left action here\n  };\n\n  const handleSwipeRight = () =&gt; {\n    // Handle swipe right action here\n  };\n\n  const handleSwipeUp = () =&gt; {\n    // Handle swipe up action here\n  };\n\n  const handleSwipeDown = () =&gt; {\n    // Handle swipe down action here\n  };\n\n  const { swipeDistance } = useSwipe({\n    onSwipeLeft: handleSwipeLeft,\n    onSwipeRight: handleSwipeRight,\n    onSwipeUp: handleSwipeUp,\n    onSwipeDown: handleSwipeDown,\n    threshold: 100,\n    maxDuration: 1000,\n    preventDefault: true,\n  });\n\n  return (\n    &lt;div&gt;\n      &lt;p&gt;Swipe Distance: {swipeDistance.x}, {swipeDistance.y}&lt;/p&gt;\n      {/* Your component content */}\n    &lt;/div&gt;\n  );\n};\n\nexport default MyComponent;\n</code></pre>\n\n<p>This code snippet demonstrates how to use <code>useSwipe</code> to detect swipe gestures with custom actions and configuration options.</p>\n\n<h2>Contributing</h2>\n\n<p>Contributions are welcome! If you have suggestions, bug reports, or would like to contribute code, please visit the GitHub repository for <code>@1ohooks/swipeable</code>.</p>\n\n<h2>License</h2>\n\n<p>This package is licensed under the ISC License. Please refer to the <a href=\"https://github.com/1ohooks/swipeable/blob/main/LICENSE\">LICENSE</a> file for details.</p>","readmeFilename":"readme.md","description":"<h1>useSwipe</h1>"}