react-repeatable

A press and hold wrapper component that can trigger hold action multiple times while holding down.

Demo: https://cheton.github.io/react-repeatable

Installation

npm install --save react-repeatable

Usage

<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>

Repeatable Button

const RepeatableButton = ({ onClick, ...props }) => (
    <Repeatable
        tag="button"
        type="button"
        onHold={onClick}
        onRelease={onClick}
        {...props}
    />
);

<RepeatableButton onClick={handleClick} />

API

Sequence of Events

Hold action is occurred

onPress -> onHoldStart -> onHold (once or more) -> onHoldEnd -> onRelease

Hold action is not occurred

onPress -> onRelease

Properties

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.

License

MIT