{"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.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install react-easy-swipe"],"cli":null},"imports":["import Swipe from 'react-easy-swipe';","import Swipe, { SwipeEvent } from 'react-easy-swipe';"],"auth":{"required":false,"env_vars":[]},"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      <Swipe\n        onSwipeStart={this.onSwipeStart}\n        onSwipeMove={this.onSwipeMove}\n        onSwipeEnd={this.onSwipeEnd}\n        allowMouseEvents={true} // Enable for desktop testing\n        tolerance={15} // Pixel tolerance for accidental swipes\n      >\n        <div style={boxStyle}>Open the console and swipe me</div>\n      </Swipe>\n    );\n  }\n}\n\nconst rootElement = document.getElementById('root');\nif (rootElement) {\n  ReactDOM.render(<MyComponent />, 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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}