react-swipe-sf v0.9.4

react-swipe-sf

DESCRIPTION

Wrapper component to include swipe features to its children.

REQUIREMENTS

React v16.8.0 or higher - Created using useState and useEffect hooks.

USE EXAMPLE

• Import dependency
• Create functions to handle position, swipe direction and add to props coordinateListener and swipeListener
• Optional timer-interval gets called through timerListener-prop when useTimer set to true

import React, {useState} from 'react';
import Swipe from 'react-swipe-sf';

const SomeComponenet = () => {
  const [swipeResult, setSwipeResult] = useState('none');

  const positionListener = (p) => {
    // returns distance moved as coordinates [x, y]
  }

  const swipeListener = (r) => {
    // Returns swipe direction r as "click", "up", "down", "right" or "left"
    setSwipeResult(r);
  }

  const timerListener = () => {
    // Called for every interval, use results from swipeListener to control the action.
    //Example: 
      if (swipeResult === "right") {
        // increment something
      } else if (swipeResult === "left") {
        // decriment something
      }
  }

  return (
    <div className='container'>

      <Swipe
        coordinateListener={positionListener}
        swipeListener={swipeListener}
        useTimer={true}
        timerListener={timerListener} >

      </Swipe>

    </div>
  )
}

export default SomeComponenet;

Additional PROPS

• verticalSwipe: (bool) To include vertical swiping or not. Default: false
• coordinateListener: (function) Required! Returns distance as an array x, y
• swipeListener: (function) Required! Returns the swipe direciton as a string (up, down, left or right)
• captureMouse: (bool) whether to include swiping of the mouse. Default: false
• immediateResponse: (bool) Whether the swipe direction is returned as soon as it changes or only after touch ends. Must be true for interval-timer to work. Default: true
• useTimer (bool): Whether to use the interval timer. Default: false
• timerListener (function) Required if useTimer is true. Gets called for each interval.
• timerDelay (number) Sets the duration between each interval. Default 600
• vibrateTime (number) Sets the vibrationtime used for each interval. Default: 50