React Easy Swipe

Common errors

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

  cause 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')

  cause 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')

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

Warnings

• gotcha Swipes 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; }`.
• gotcha By 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.
• breaking The `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} ...>`.
• gotcha For 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.

Install

• npm install react-easy-swipe npm
• yarn add react-easy-swipe yarn
• pnpm add react-easy-swipe pnpm

Imports

• Swipe
  wrong:

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

  correct:

  import Swipe from '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.

Quickstart

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.');
}