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

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>
		); 
	}
}

  
@-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;
}

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