{"id":11699,"library":"react-easy-swipe","title":"React Easy Swipe","description":"React Easy Swipe is a JavaScript library providing a simple component for handling touch swipe gestures within React applications. Currently stable at version 0.0.23, it offers straightforward integration for detecting common swipe directions (up, down, left, right) as well as general swipe start, move, and end events. The library differentiates itself by its minimal API and direct focus on touch interactions, with an option to enable mouse events for development. It includes features to prevent page scrolling during a swipe and to set a pixel tolerance for accidental swipes, making it suitable for mobile-first user interfaces. With its last publish date three years ago, releases appear to follow a 'when needed' cadence, characteristic of mature, focused utility libraries.","status":"maintenance","version":"0.0.23","language":"javascript","source_language":"en","source_url":"https://github.com/leandrowd/react-easy-swipe","tags":["javascript","React swipe","React easy swipe","React touch","react-swipe","react-easy-swipe","react-touch","react-component","Mobile","typescript"],"install":[{"cmd":"npm install react-easy-swipe","lang":"bash","label":"npm"},{"cmd":"yarn add react-easy-swipe","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-easy-swipe","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for any React component.","package":"react","optional":false}],"imports":[{"note":"The library exports the `Swipe` component as a default export. TypeScript type definitions are included with the package.","wrong":"import { Swipe } from 'react-easy-swipe';\nconst Swipe = require('react-easy-swipe');","symbol":"Swipe","correct":"import Swipe from 'react-easy-swipe';"},{"note":"If you need to explicitly type the event object in TypeScript, `SwipeEvent` might be available, though typically inferred.","symbol":"SwipeEvent","correct":"import Swipe, { SwipeEvent } from 'react-easy-swipe';"}],"quickstart":{"code":"import React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport Swipe from 'react-easy-swipe';\n\nclass MyComponent extends Component {\n onSwipeStart(event) {\n console.log('Start swiping...', event);\n }\n\n onSwipeMove(position, event) {\n console.log(`Moved ${position.x} pixels horizontally`, event);\n console.log(`Moved ${position.y} pixels vertically`, event);\n // Return true to prevent scroll during swipe\n // return true;\n }\n\n onSwipeEnd(event) {\n console.log('End swiping...', event);\n }\n\n render() {\n const boxStyle = {\n width: '100%',\n height: '300px',\n border: '1px solid black',\n background: '#ccc',\n padding: '20px',\n fontSize: '3em',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n };\n\n return (\n \n
Open the console and swipe me
\n \n );\n }\n}\n\nconst rootElement = document.getElementById('root');\nif (rootElement) {\n ReactDOM.render(, rootElement);\n} else {\n console.error('Root element not found. Please ensure an element with id=\"root\" exists in your HTML.');\n}\n","lang":"typescript","description":"This quickstart demonstrates how to integrate the `Swipe` component, define basic swipe event handlers (`onSwipeStart`, `onSwipeMove`, `onSwipeEnd`), and enable `allowMouseEvents` for testing. It also highlights the required `tolerance` prop."},"warnings":[{"fix":"Return `true` from the `onSwipeMove` handler to prevent the default scroll behavior: `onSwipeMove(position, event) { /* ... */ return true; }`.","message":"Swipes might interfere with page scrolling unless explicitly handled.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Pass `allowMouseEvents={true}` to the `Swipe` component to enable mouse interaction for testing on desktop environments.","message":"By default, the component only responds to touch events, which can make testing on desktop challenging.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Always ensure the `tolerance` prop is provided with a numeric value, e.g., ``.","message":"The `tolerance` prop is required and must be a number. Failing to provide it will result in a runtime error related to prop types.","severity":"breaking","affected_versions":">=0.0.1"},{"fix":"Use your browser's developer tools to enable touch emulation or deploy your application to a mobile device for real-world testing.","message":"For accurate testing of touch-specific events, your browser must emulate touch gestures or you should test on a physical mobile device.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Add the `tolerance` prop with a number value, e.g., ``.","cause":"The required `tolerance` prop was not provided to the `Swipe` component.","error":"Warning: Failed prop type: The prop `tolerance` is marked as required in `Swipe`, but its value is `undefined`."},{"fix":"Use `import Swipe from 'react-easy-swipe';` instead of named imports like `import { Swipe } from 'react-easy-swipe';` or CommonJS `require` for ESM environments.","cause":"Incorrect import statement used for the `Swipe` component, which is a default export.","error":"TypeError: Swipe is not a constructor (or similar errors like 'undefined is not a function')"},{"fix":"Ensure `position` is defined before accessing its properties within the `onSwipeMove` handler, or add defensive checks if `position` can sometimes be `null` or `undefined`.","cause":"Attempting to access properties of the `position` object (e.g., `position.x`, `position.y`) in `onSwipeMove` when the event object might be structured differently or `position` is not yet defined in specific edge cases.","error":"Cannot read properties of undefined (reading 'x')"}],"ecosystem":"npm"}