{"id":18910038,"url":"https://github.com/cheton/react-repeatable","last_synced_at":"2025-04-15T06:31:04.194Z","repository":{"id":47707541,"uuid":"115618302","full_name":"cheton/react-repeatable","owner":"cheton","description":"A press and hold wrapper component that can trigger hold action multiple times while holding down.","archived":false,"fork":false,"pushed_at":"2021-08-17T09:13:31.000Z","size":1895,"stargazers_count":23,"open_issues_count":3,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-10T20:37:57.072Z","etag":null,"topics":["component","hold","press","react","release","repeatable"],"latest_commit_sha":null,"homepage":"https://cheton.github.io/react-repeatable/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cheton.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-28T11:49:45.000Z","updated_at":"2023-09-28T06:49:14.000Z","dependencies_parsed_at":"2022-08-22T15:50:39.495Z","dependency_job_id":null,"html_url":"https://github.com/cheton/react-repeatable","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheton%2Freact-repeatable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheton%2Freact-repeatable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheton%2Freact-repeatable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheton%2Freact-repeatable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cheton","download_url":"https://codeload.github.com/cheton/react-repeatable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249011318,"owners_count":21198005,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","hold","press","react","release","repeatable"],"created_at":"2024-11-08T09:39:07.555Z","updated_at":"2025-04-15T06:31:04.131Z","avatar_url":"https://github.com/cheton.png","language":"JavaScript","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)\n\n[![NPM](https://nodei.co/npm/react-repeatable.png?downloads=true\u0026stars=true)](https://nodei.co/npm/react-repeatable/)\n\nA press and hold wrapper component that can trigger hold action multiple times while holding down.\n\nDemo: https://cheton.github.io/react-repeatable\n\n## Installation\n\n```\nnpm install --save react-repeatable\n```\n\n## Usage\n\n```jsx\n\u003cRepeatable\n    repeatDelay={500}\n    repeatInterval={32}\n    onPress={(event) =\u003e {\n        // Callback fired when the mousedown or touchstart event is triggered.\n    }}\n    onHoldStart={() =\u003e {\n        // Callback fired once before the first hold action.\n    }}\n    onHold={() =\u003e {\n        // Callback fired mutiple times while holding down.\n    }}\n    onHoldEnd={() =\u003e {\n        // Callback fired once after the last hold action.\n    }}\n    onRelease={(event) =\u003e {\n        // Callback fired when the mouseup, touchcancel, or touchend event is triggered.\n    }}\n\u003e\n    Press Me\n\u003c/Repeatable\u003e\n```\n\n### Repeatable Button\n\n```jsx\nconst RepeatableButton = ({ onClick, ...props }) =\u003e (\n    \u003cRepeatable\n        tag=\"button\"\n        type=\"button\"\n        onHold={onClick}\n        onRelease={onClick}\n        {...props}\n    /\u003e\n);\n\n\u003cRepeatableButton onClick={handleClick} /\u003e\n```\n\n## API\n\n### Sequence of Events\n\n#### Hold action is occurred\nonPress -\u003e onHoldStart -\u003e onHold (once or more) -\u003e onHoldEnd -\u003e onRelease\n\n#### Hold action is not occurred\nonPress -\u003e onRelease\n\n### Properties\n\nName | Type | Default | Description\n:--- | :--- | :------ | :----------\ntag | element | 'div' | A custom element for this component.\ndisabled | Boolean | false | Set it to true to disable event actions.\nrepeatDelay | Number | 500 | The time (in milliseconds) to wait before the first hold action is being triggered.\nrepeatInterval | Number | 32 | The time interval (in milliseconds) on how often to trigger a hold action.\nrepeatCount | Number | 0 | The number of times the hold action will take place. A zero value will disable the repeat counter.\nonPress | Function(event) | | Callback fired when the mousedown or touchstart event is triggered.\nonHoldStart | Function() | | Callback fired once before the first hold action.\nonHold | Function() | | Callback fired mutiple times while holding down.\nonHoldEnd | Function() | | Callback fired once after the last hold action.\nonRelease | Function(event) | | Callback fired when the mouseup, touchcancel, or touchend event is triggered.\n\n## License\n\nMIT\n","funding_links":[],"categories":["React"],"sub_categories":["React Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcheton%2Freact-repeatable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcheton%2Freact-repeatable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcheton%2Freact-repeatable/lists"}