rcn

react-click-n-hold

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

Showing:

Popularity

Downloads/wk

1.2K

GitHub Stars

54

Maintenance

Last Commit

3yrs ago

Contributors

5

Package

Dependencies

2

Size (min+gzip)

37.9KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial