/finger-swipe-js

Primary LanguageJavaScript

Finger Swipe JS

Run any function on swipe!

Finger Swipe JS is a easy-to-use library which you can trigger any function on swipe with your finger!

Works only mobile devices.

Try live demo:

https://finger-swipe-js.vercel.app

How to install

NPM

npm install finger-swipe-js

Usage

import Finger Swipe Js into your file.

  import FingerSwipe from 'finger-swipe-js'

Props

Type Description
direction horizontal / vertical Declare on which direction callbacks will be triggered.
motionSensivity number How much pixels you need to swipe your finger to trigger callback. Default is 50.
style object Add style to container
onLeft function Callback function to trigger on swipe left.
onRight function Callback function to trigger on swipe right.
onUp function Callback function to trigger on swipe up.
onDown function Callback function to trigger on swipe down.

Example

 import { useEffect, useState } from 'react';
 import FingerSwipe from 'finger-swipe-js';
 
 const App = () => {
     return (
       <FingerSwipe
         direction='horizontal'
         style={{width: '100%'}}
         onLeft={() => {
           console.log('deleted!');
         }}
       >
         <div className='demo-container-delete'>
           Swipe left to delete me!
         </div>
       </FingerSwipe>
     )
 }
 
 export default App;

Done!!