rcn

react-click-n-hold

Long press event for react. Click and hold wrapper component. 👽 👷‍♂️ 🚧 📦

Showing:

Readme

react-click-n-hold

by @sonsoleslp

Long press event for react. Click and hold wrapper component.

Detect when a DOM element has been pressed for the amount of time you specify. http://sonsoleslp.github.io/react-click-n-hold/

react-click-n-hold

Example usage

First install the component

npm install --save react-click-n-hold

Then use the component in your app

import React from 'react';
import ClickNHold from 'react-click-n-hold'; 

export default class Example extends React.Component {
    start(e){
        console.log('START'); 
    } 
    
    end(e, enough){
        console.log('END');
        console.log(enough ? 'Click released after enough time': 'Click released too soon');            
    } 
    
    clickNHold(e){
        console.log('CLICK AND HOLD');  
    } 

    render(){
        return ( 
            <ClickNHold 
                time={2} // Time to keep pressing. Default is 2
                onStart={this.start} // Start callback
                onClickNHold={this.clickNHold} //Timeout callback
                onEnd={this.end} > // Click release callback
                    <button>Click and hold</button>
            </ClickNHold>
        ); 
    }
}

Styling animation:

  • This component does not provide css for pressing effects
  • However, during press, .cnh_holding is applied to the wrapper, allowing the user to animate the transition using css
  • Below is an example of styling; the one used in the demo
@-webkit-keyframes fill {to {
   background-size: 100% 0;}
} 

@keyframes fill {to { 
   background-size: 100% 0;}
}

//The wrapper has the .cnh_holding class while the button is being pressed

.cnh_holding button {background: -webkit-linear-gradient( white , white) rgb(255,215,235) no-repeat 0 0;background: linear-gradient( white , white) rgb(255,215,235) no-repeat 0 0;mix-blend-mode: multiply;background-size: 100% 100%;-webkit-animation: fill 2s forwards;animation: fill 2s forwards;
}

Run locally

npm install react-click-n-hold
npm run dev 

Open localhost:8080