react-swipeable

What is react-swipeable?

The react-swipeable package is a React component that provides easy-to-use swipe event handlers for touch devices. It allows developers to add swipe functionality to their React components, making it ideal for creating touch-friendly user interfaces.

What are react-swipeable's main functionalities?

Basic Swipe Detection

This code demonstrates how to use the react-swipeable package to detect basic swipe events. The `useSwipeable` hook is used to create swipe handlers, which are then applied to a div element. When a swipe is detected, a message is logged to the console.

import React from 'react';
import { useSwipeable } from 'react-swipeable';

const SwipeComponent = () => {
  const handlers = useSwipeable({
    onSwiped: (eventData) => console.log('User Swiped!', eventData)
  });

  return (
    <div {...handlers} style={{ width: '100%', height: '100px', background: 'lightgray' }}>
      Swipe here
    </div>
  );
};

export default SwipeComponent;

Swipe Direction Detection

This code demonstrates how to detect the direction of a swipe using the react-swipeable package. The `useSwipeable` hook is configured with handlers for each swipe direction (left, right, up, down), and logs a message to the console when a swipe in that direction is detected.

import React from 'react';
import { useSwipeable } from 'react-swipeable';

const SwipeDirectionComponent = () => {
  const handlers = useSwipeable({
    onSwipedLeft: () => console.log('Swiped Left!'),
    onSwipedRight: () => console.log('Swiped Right!'),
    onSwipedUp: () => console.log('Swiped Up!'),
    onSwipedDown: () => console.log('Swiped Down!')
  });

  return (
    <div {...handlers} style={{ width: '100%', height: '100px', background: 'lightblue' }}>
      Swipe in any direction
    </div>
  );
};

export default SwipeDirectionComponent;

Swipe Threshold Configuration

This code demonstrates how to configure a swipe threshold using the react-swipeable package. The `useSwipeable` hook is configured with a `delta` value, which sets the minimum distance (in pixels) that a swipe must cover to be detected.

import React from 'react';
import { useSwipeable } from 'react-swipeable';

const SwipeThresholdComponent = () => {
  const handlers = useSwipeable({
    onSwiped: (eventData) => console.log('User Swiped!', eventData),
    delta: 50 // Minimum distance (in pixels) for a swipe to be detected
  });

  return (
    <div {...handlers} style={{ width: '100%', height: '100px', background: 'lightgreen' }}>
      Swipe with a minimum threshold
    </div>
  );
};

export default SwipeThresholdComponent;

Other packages similar to react-swipeable

react-swipe

The react-swipe package provides a React component for touch slide navigation. It is similar to react-swipeable in that it allows for swipe detection, but it is more focused on creating swipeable carousels and sliders. It offers a higher-level abstraction compared to react-swipeable.

react-use-gesture

The react-use-gesture package is a set of hooks for handling gestures in React. It supports a wide range of gestures, including swipes, pinches, and scrolls. Compared to react-swipeable, react-use-gesture offers more comprehensive gesture support and can be used for more complex interactions.

react-swipeable-views

The react-swipeable-views package is a React component for creating swipeable views, such as tabs or carousels. It is similar to react-swipeable in that it provides swipe detection, but it is specifically designed for creating swipeable view containers. It offers built-in support for animations and transitions.

README

Swipeable

Install

$ npm install react-swipeable

Use

var Swipeable = require('react-swipeable')

var SampleComponent = React.createClass({
  render: function () {
    return (
      <Swipeable
        onSwiping={this.swiping}
        onSwipingUp={this.swipingUp}
        onSwipingRight={this.swipingRight}
        onSwipingDown={this.swipingDown}
        onSwipingLeft={this.swipingLeft}
        onSwipedUp={this.swipedUp}
        onSwipedRight={this.swipedRight}
        onSwipedDown={this.swipedDown}
        onSwipedLeft={this.swipedLeft}
        onSwiped={this.handleSwipeAction}>
        <div>
          This element can be swiped
        </div>
      </Swipeable>
    )
  }
})

Props

None of the props are required. onSwiping, onSwipingUp, onSwipingRight, onSwipingDown, onSwipingLeft, calls back with the event as well as the absolute delta of where the swipe started and where it's currently at. These constantly fire throughout touch events.

onSwipedUp, onSwipedRight, onSwipedDown, onSwipedLeft calls back with the event as well as the x distance, + or -, from where the swipe started to where it ended. These only fire at the end of a touch event.

onSwiped calls back with the event, the X and Y delta, and whether or not the event was a flick this.props.onSwiped(ev, x, y, isFlick)

flickThreshold is a number (float) which determines the max velocity of a swipe before it's considered a flick.

delta is the amount of px before we start firing events. Also effects how far onSwipedUp, onSwipedRight, onSwipedDown, and onSwipedLeft need to be before they fire events. The default value is 10.

PropTypes

  onSwiped: React.PropTypes.func,
  onSwiping: React.PropTypes.func,
  onSwipingUp: React.PropTypes.func,
  onSwipingRight: React.PropTypes.func,
  onSwipingDown: React.PropTypes.func,
  onSwipingLeft: React.PropTypes.func,
  onSwipedUp: React.PropTypes.func,
  onSwipedRight: React.PropTypes.func,
  onSwipedDown: React.PropTypes.func,
  onSwipedLeft: React.PropTypes.func,
  flickThreshold: React.PropTypes.number,
  delta: React.PropTypes.number

Development

Initial set up, run:

$ npm install

For watch on files and JSX transpiling, run:

$ gulp

#####Please make updates and changes to the jsx/Swipeable.jsx, and have gulp/babel compile the js/Swipeable.js file.

License

MIT

Changelog

3.1.0

• Adds isFLick to onSwipe events
• Removes React as a peer dep
• Adds onSwiping events