Registry / web-framework / react-easy-swipe

react-easy-swipe

library0.0.23jsnpmunverified

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.

web-framework

npm install react-easy-swipe

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-EASY-SWIPE

react-easy-swipe

web-frameworkjavascriptv0.0.23

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Swipe

✓ import Swipe from 'react-easy-swipe';

✗ import { Swipe } from 'react-easy-swipe'; const Swipe = require('react-easy-swipe');

The library exports the `Swipe` component as a default export. TypeScript type definitions are included with the package.

SwipeEvent

✓ import Swipe, { SwipeEvent } from 'react-easy-swipe';

If you need to explicitly type the event object in TypeScript, `SwipeEvent` might be available, though typically inferred.

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.

import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import Swipe from 'react-easy-swipe'; class MyComponent extends Component { onSwipeStart(event) { console.log('Start swiping...', event); } onSwipeMove(position, event) { console.log(`Moved ${position.x} pixels horizontally`, event); console.log(`Moved ${position.y} pixels vertically`, event); // Return true to prevent scroll during swipe // return true; } onSwipeEnd(event) { console.log('End swiping...', event); } render() { const boxStyle = { width: '100%', height: '300px', border: '1px solid black', background: '#ccc', padding: '20px', fontSize: '3em', display: 'flex', alignItems: 'center', justifyContent: 'center' }; return ( <Swipe onSwipeStart={this.onSwipeStart} onSwipeMove={this.onSwipeMove} onSwipeEnd={this.onSwipeEnd} allowMouseEvents={true} // Enable for desktop testing tolerance={15} // Pixel tolerance for accidental swipes > <div style={boxStyle}>Open the console and swipe me</div> </Swipe> ); } } const rootElement = document.getElementById('root'); if (rootElement) { ReactDOM.render(<MyComponent />, rootElement); } else { console.error('Root element not found. Please ensure an element with id="root" exists in your HTML.'); }

Debug

Known issues

gotchaSwipes might interfere with page scrolling unless explicitly handled.

fix

Return `true` from the `onSwipeMove` handler to prevent the default scroll behavior: `onSwipeMove(position, event) { /* ... */ return true; }`.

affects: >=0.0.1

gotchaBy default, the component only responds to touch events, which can make testing on desktop challenging.

fix

Pass `allowMouseEvents={true}` to the `Swipe` component to enable mouse interaction for testing on desktop environments.

affects: >=0.0.1

breakingThe `tolerance` prop is required and must be a number. Failing to provide it will result in a runtime error related to prop types.

fix

Always ensure the `tolerance` prop is provided with a numeric value, e.g., `<Swipe tolerance={10} ...>`.

affects: >=0.0.1

gotchaFor accurate testing of touch-specific events, your browser must emulate touch gestures or you should test on a physical mobile device.

fix

Use your browser's developer tools to enable touch emulation or deploy your application to a mobile device for real-world testing.

affects: >=0.0.1

Errors

Common errors & fixes

Warning: Failed prop type: The prop `tolerance` is marked as required in `Swipe`, but its value is `undefined`.

The required `tolerance` prop was not provided to the `Swipe` component.

fix

Add the `tolerance` prop with a number value, e.g., `<Swipe tolerance={10} ...>`.

TypeError: Swipe is not a constructor (or similar errors like 'undefined is not a function')

Incorrect import statement used for the `Swipe` component, which is a default export.

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.

Cannot read properties of undefined (reading 'x')

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.

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`.

Upgrade

Version history

0.0.23latest on npm

Audit

Dependencies

reactrequiredRequired as a peer dependency for any React component.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/leandrowd/react-easy-swipe ↗

packagehttps://www.npmjs.com/package/react-easy-swipe ↗

homepagehttp://leandrowd.github.io/react-easy-swipe/ ↗