@odnh/use-swipe v1.2.4

useSwipe

React Custom Hook useSwipe

Install

yarn add @odnh/use-swipe
# or
npm install @odnh/use-swipe

Use

  useSwipe(target: Target, options: Options) => SwipeMoveState | SwipeDoneState;

Parameters

options

Returns

SwipeMoveState

SwipeDoneState

Example

live demo

import React from 'react';
import useSwipe, { SwipeStateEnum } from '@odnh/use-swipe';

const DEFAULT_STYLE = {
  width: '100px',
  height: '100px',
  border: '1px solid #ddd',
  transform: 'translate(0, 0)',
  transition: 'transform 300ms'
};
const App = () => {
  const elementRef = React.useRef(null);
  const swipe = useSwipe(elementRef);
  
  const swipeStyle = React.useMemo(() => {
    if(state === SwipeStateEnum.DONE) {
      return DEFAULT_STYLE;
    } else {
      const { x, y } = swipe
      return {
        ...DEFAULT_STYLE,
        transform: `translate(${x}px, ${y}px)`,
        transition: 'transform 100ms'
      }
    }
  }, [swipe]);
  
  return (
    <div ref={elementRef} style={{width: '100vw', height: '100vh'}}>
      <div
        style={swipeStyle}
      >
        swipe
      </div>
    </div>
  )
}