{"id":25451153,"url":"https://github.com/williamjayjay/react-react-native-not-rapid-click","last_synced_at":"2026-02-03T00:02:27.145Z","repository":{"id":266163663,"uuid":"897597091","full_name":"williamjayjay/react-react-native-not-rapid-click","owner":"williamjayjay","description":"Is a custom hook designed to prevent rapid function executions by debouncing user actions like button clicks.","archived":false,"fork":false,"pushed_at":"2024-12-03T01:05:04.000Z","size":11,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-19T11:19:56.136Z","etag":null,"topics":["react","react-native","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-react-native-not-rapid-click","language":"TypeScript","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/williamjayjay.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-02T22:46:00.000Z","updated_at":"2024-12-03T14:05:50.000Z","dependencies_parsed_at":"2025-02-17T22:38:08.998Z","dependency_job_id":null,"html_url":"https://github.com/williamjayjay/react-react-native-not-rapid-click","commit_stats":null,"previous_names":["williamjayjay/react-react-native-not-rapid-click"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/williamjayjay/react-react-native-not-rapid-click","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/williamjayjay%2Freact-react-native-not-rapid-click","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/williamjayjay%2Freact-react-native-not-rapid-click/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/williamjayjay%2Freact-react-native-not-rapid-click/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/williamjayjay%2Freact-react-native-not-rapid-click/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/williamjayjay","download_url":"https://codeload.github.com/williamjayjay/react-react-native-not-rapid-click/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/williamjayjay%2Freact-react-native-not-rapid-click/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261539319,"owners_count":23174135,"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":["react","react-native","typescript"],"created_at":"2025-02-17T22:24:08.939Z","updated_at":"2026-02-03T00:02:27.085Z","avatar_url":"https://github.com/williamjayjay.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n### `REACT REACT NATIVE NOT RAPID CLICK`\n\n```markdown\n# react-react-native-not-rapid-click\n\n`react-react-native-not-rapid-click` is a custom hook designed to prevent rapid function executions by debouncing user actions like button clicks. It helps to avoid triggering the same action multiple times in quick succession, improving performance and user experience in both React and React Native applications.\n\n## Features\n\n- Prevents rapid clicks or function executions by applying a debounce mechanism.\n  \n- Works seamlessly in both React (web) and React Native environments.\n\n- Customizable debounce delay to suit different use cases.\n\n## Installation\n\nTo use `react-react-native-not-rapid-click`, simply install it via npm or yarn:\n\n```\n\n### Using npm:\n```bash\nnpm install react-react-native-not-rapid-click\n```\n\n### Using Yarn:\n```bash\nyarn add react-react-native-not-rapid-click\n```\n\n### Using Bun:\n```bash\nbun add react-react-native-not-rapid-click\n```\n\n## Usage\n\nOnce installed, you can import and use the `useNotRapidClick` hook in your React or React Native components.\n\n### Example:\n\n#### React Native (Mobile Example):\n\n```javascript\nimport React, { useState } from 'react';\nimport { Button, View, Text } from 'react-native';  // React Native components\nimport { useNotRapidClick } from 'react-react-native-not-rapid-click';\n\nconst ExampleComponent = () =\u003e {\n  const [count, setCount] = useState(0);\n\n  // Function to be debounced\n  const handleClick = () =\u003e {\n    setCount(count + 1);\n    console.log('Button clicked', count + 1);\n  };\n\n  // Use the custom hook to debounce the function with a 1000ms delay\n  const debouncedClick = useNotRapidClick(handleClick, 1000);\n\n  return (\n    \u003cView\u003e\n      \u003cButton title=\"Click Me\" onPress={debouncedClick} /\u003e\n      \u003cText\u003eButton clicked {count} times\u003c/Text\u003e\n    \u003c/View\u003e\n  );\n};\n\nexport default ExampleComponent;\n```\n\nIn this React Native example, we are debouncing a button click with a delay of 1000ms (1 second). This prevents the function from being called multiple times in quick succession.\n\n#### React (Web Example):\n\n```javascript\nimport React, { useState } from 'react';\nimport { useNotRapidClick } from 'react-react-native-not-rapid-click';\n\nconst ExampleComponent = () =\u003e {\n  const [count, setCount] = useState(0);\n\n  // Function to be debounced\n  const handleClick = () =\u003e {\n    setCount(count + 1);\n    console.log('Button clicked', count + 1);\n  };\n\n  // Use the custom hook to debounce the function with a 1000ms delay\n  const debouncedClick = useNotRapidClick(handleClick, 1000);\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={debouncedClick}\u003eClick Me\u003c/button\u003e\n      \u003cp\u003eButton clicked {count} times\u003c/p\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default ExampleComponent;\n```\n\nThis example demonstrates how to use the hook in a React web application. The button click will trigger the debounced `handleClick` function, but only once every 1000ms.\n\n## How It Works\n\n- `useNotRapidClick(fn, delay)` takes two arguments:\n  - `fn`: The function you want to debounce.\n  - `delay`: The delay (in milliseconds) for the debounce mechanism, which controls how frequently the function can be executed.\n\n- When the function is triggered (e.g., by a button click), it will only execute if the specified delay has passed since the last execution. This prevents multiple rapid executions of the same function.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwilliamjayjay%2Freact-react-native-not-rapid-click","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwilliamjayjay%2Freact-react-native-not-rapid-click","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwilliamjayjay%2Freact-react-native-not-rapid-click/lists"}