react-repeatable build status Coverage Status
A press and hold wrapper component that can trigger hold action multiple times while holding down.
Demo: https://cheton.github.io/react-repeatable
npm install --save react-repeatable
<Repeatable repeatDelay={500} repeatInterval={32} onPress={(event) => { // Callback fired when the mousedown or touchstart event is triggered. }} onHoldStart={() => { // Callback fired once before the first hold action. }} onHold={() => { // Callback fired mutiple times while holding down. }} onHoldEnd={() => { // Callback fired once after the last hold action. }} onRelease={(event) => { // Callback fired when the mouseup, touchcancel, or touchend event is triggered. }} > Press Me </Repeatable>
const RepeatableButton = ({ onClick, ...props }) => ( <Repeatable tag="button" type="button" onHold={onClick} onRelease={onClick} {...props} /> ); <RepeatableButton onClick={handleClick} />
onPress -> onHoldStart -> onHold (once or more) -> onHoldEnd -> onRelease
onPress -> onRelease
| Name | Type | Default | Description |
|---|---|---|---|
| tag | element | 'div' | A custom element for this component. |
| disabled | Boolean | false | Set it to true to disable event actions. |
| repeatDelay | Number | 500 | The time (in milliseconds) to wait before the first hold action is being triggered. |
| repeatInterval | Number | 32 | The time interval (in milliseconds) on how often to trigger a hold action. |
| repeatCount | Number | 0 | The number of times the hold action will take place. A zero value will disable the repeat counter. |
| onPress | Function(event) | Callback fired when the mousedown or touchstart event is triggered. | |
| onHoldStart | Function() | Callback fired once before the first hold action. | |
| onHold | Function() | Callback fired mutiple times while holding down. | |
| onHoldEnd | Function() | Callback fired once after the last hold action. | |
| onRelease | Function(event) | Callback fired when the mouseup, touchcancel, or touchend event is triggered. |
MIT