https://github.com/shaack/touch-and-hold-button
https://github.com/shaack/touch-and-hold-button
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/shaack/touch-and-hold-button
- Owner: shaack
- Created: 2023-10-08T07:40:27.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-11T16:15:52.000Z (over 1 year ago)
- Last Synced: 2026-02-01T10:08:29.783Z (5 months ago)
- Language: JavaScript
- Size: 26.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# touch-and-hold-button
Transform a HTML button to a touch-and-hold (long press) button.
- Prevent accidental button press with hold confirmation
- Works with or without Bootstrap
## References
- [Demo page](https://shaack.com/projekte/touch-and-hold-button/)
- [GitHub repository](https://github.com/shaack/touch-and-hold-button)
- [npm package](https://www.npmjs.com/package/touch-and-hold-button)
## Usage
```html
Hold Me
import {TouchAndHoldButton} from './src/TouchAndHoldButton.js'
const buttonElement = document.getElementById('holdButton')
const touchAndHoldButton = new TouchAndHoldButton(buttonElement)
buttonElement.addEventListener('hold', () => {
console.log('`hold` event fired.')
})
buttonElement.addEventListener('confirm', () => {
console.log('`confirm` event fired.')
})
buttonElement.addEventListener('cancel', () => {
console.log('`cancel` event fired.')
})
buttonElement.addEventListener('action', () => {
console.log('`action` event fired.')
alert('Button confirmed action')
})
```
### Default props
```javascript
this.props = {
holdDuration: 1000,
fillColor: "rgba(0,0,0,0.1)",
confirmedShadow: "0 0 0 5px rgba(0,100,0,0.5)"
}
```
---
Find more high quality modules from [shaack.com](https://shaack.com)
on [our projects page](https://shaack.com/works).