https://github.com/cheton/react-repeatable

A press and hold wrapper component that can trigger hold action multiple times while holding down.
https://github.com/cheton/react-repeatable

component hold press react release repeatable

Last synced: 10 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/cheton/react-repeatable
• Owner: cheton
• License: mit
• Created: 2017-12-28T11:49:45.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2021-08-17T09:13:31.000Z (over 3 years ago)
• Last Synced: 2024-10-30T00:00:15.835Z (20 days ago)
• Topics: component, hold, press, react, release, repeatable
• Language: JavaScript
• Homepage: https://cheton.github.io/react-repeatable/
• Size: 1.81 MB
• Stars: 23
• Watchers: 2
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-repeatable [![build status](https://travis-ci.org/cheton/react-repeatable.svg?branch=master)](https://travis-ci.org/cheton/react-repeatable) [![Coverage Status](https://coveralls.io/repos/github/cheton/react-repeatable/badge.svg?branch=master)](https://coveralls.io/github/cheton/react-repeatable?branch=master)

[![NPM](https://nodei.co/npm/react-repeatable.png?downloads=true&stars=true)](https://nodei.co/npm/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

```jsx

 {

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

```jsx

const RepeatableButton = ({ onClick, ...props }) => (

    

);

```

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