{"id":14982752,"url":"https://github.com/itszeeshan/react-custom-hooks","last_synced_at":"2025-07-22T17:02:23.672Z","repository":{"id":255807003,"uuid":"848492164","full_name":"itszeeshan/react-custom-hooks","owner":"itszeeshan","description":"A vscode extension built and design to help you insert custom react hooks into your project with autocomplete support.","archived":false,"fork":false,"pushed_at":"2024-09-07T06:38:19.000Z","size":16253,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-02T03:13:43.394Z","etag":null,"topics":["custom-hooks","customizable","frontend","hooks-async","hooks-library","hooks-props-and-state","hookstate","javascript","nextjs","nextjs14","react","react-hooks","reactjs","ready-to-use","snippets","typescript","ui","vscode-extension","vscode-snippets","webdevelopment"],"latest_commit_sha":null,"homepage":"","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/itszeeshan.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-08-27T21:29:27.000Z","updated_at":"2024-09-20T07:34:52.000Z","dependencies_parsed_at":"2024-09-07T07:43:36.110Z","dependency_job_id":"21f4c424-23e0-4f67-889f-e3b1dda3ea7e","html_url":"https://github.com/itszeeshan/react-custom-hooks","commit_stats":null,"previous_names":["itszeeshan/react-custom-hooks"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itszeeshan%2Freact-custom-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itszeeshan%2Freact-custom-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itszeeshan%2Freact-custom-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itszeeshan%2Freact-custom-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itszeeshan","download_url":"https://codeload.github.com/itszeeshan/react-custom-hooks/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238848446,"owners_count":19540887,"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":["custom-hooks","customizable","frontend","hooks-async","hooks-library","hooks-props-and-state","hookstate","javascript","nextjs","nextjs14","react","react-hooks","reactjs","ready-to-use","snippets","typescript","ui","vscode-extension","vscode-snippets","webdevelopment"],"created_at":"2024-09-24T14:05:57.544Z","updated_at":"2025-07-22T17:02:23.660Z","avatar_url":"https://github.com/itszeeshan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003cimg src=\"./images/icon.png\" alt=\"drawing\" width=\"35\"/\u003e React Custom Hooks Snippets for VS Code\n\nEnhance your development workflow with this VS Code extension that offers a collection of useful React Custom hooks as code. Whether you're using JavaScript or TypeScript, this extension dynamically loads and provides snippets from external files, to fit your project needs.\n\n## What It Does\n\n- **Hooks Snippets**: Provides ready-to-use snippets for various React hooks.\n- **Automatic Loading**: Loads snippets from files, including hooks that depend on others.\n- **File Type Detection**: Chooses the right snippet based on whether you're using JavaScript or TypeScript.\n\n## Supported File Ext\n\n- `.js`\n- `.ts`\n- `.jsx`\n- `.tsx`\n\n## How to Install\n\n1. Go to VSCode extensions section.\n2. Search for `react custom hooks`, make sure the author is `zeesec`.\n3. Press `Install` button.\n\n## How to Use\n\n1. Open a JavaScript or TypeScript file in VS Code.\n2. Type the snippet prefix (e.g., `useFetch`).\n3. Select the snippet from the suggestion list to insert it into your code.\n\n![Manual](./images/assets/manual.gif)\n\n### Javascript Support With Javascript code\n\n![Javascript Support With Javascript code](./images/assets/javascript-support.png)\n\n### Typescript Support With Typescript code\n\n![Typescript Support With Typescript code](./images/assets/typescript-support.png)\n\n## Available Snippets\n\nHere are some of the snippets you can use:\n\n| Hook                       | Description                                                                                                |\n| -------------------------- | ---------------------------------------------------------------------------------------------------------- |\n| **useFetch**               | A hook to fetch data from a URL.                                                                           |\n| **useAsync**               | A hook to handle asynchronous tasks.                                                                       |\n| **useArray**               | A hook for managing and manipulating an array with functions like push, filter, update, remove, and clear. |\n| **useClickOutside**        | A hook to detect clicks outside a specified element and trigger a callback.                                |\n| **useCookie**              | A hook for managing cookies with get, set, and delete functionality.                                       |\n| **useCopyToClipboard**     | A hook to copy text to the clipboard and track success.                                                    |\n| **useDebounce**            | A hook to debounce a callback function with a specified delay.                                             |\n| **useDeepCompareEffect**   | A hook for running an effect with dependencies that are deeply compared.                                   |\n| **useEffectOnce**          | A hook to run an effect only once on mount.                                                                |\n| **useGeolocation**         | A hook to get and watch the user's geolocation.                                                            |\n| **useHover**               | A hook to track whether an element is being hovered over.                                                  |\n| **useMediaQuery**          | A hook to detect whether a media query matches.                                                            |\n| **useOnlineStatus**        | A hook to detect the online/offline status of the browser.                                                 |\n| **useOnScreen**            | A hook to detect if an element is visible within the viewport.                                             |\n| **usePrevious**            | A hook to keep track of the previous value of a state or prop.                                             |\n| **useRenderCount**         | A hook to count the number of times a component has rendered.                                              |\n| **useScript**              | A hook to dynamically load a script and handle its loading state.                                          |\n| **useStorage**             | A generic hook for managing state with a storage mechanism (e.g., localStorage, sessionStorage).           |\n| **useSessionStorage**      | A hook for managing state with sessionStorage.                                                             |\n| **useLocalStorage**        | A hook for managing state with localStorage.                                                               |\n| **useDarkMode**            | A hook to manage dark mode state and apply dark mode styling based on user preference and localStorage.    |\n| **useTimeout**             | A hook to manage a timeout with set, clear, and reset functionalities.                                     |\n| **useToggle**              | A hook to toggle a boolean value.                                                                          |\n| **useUpdateEffect**        | A hook to run an effect only on updates, not on the initial mount.                                         |\n| **useWindowSize**          | A hook to track the window size and update on resize events.                                               |\n| **useStateWithHistory**    | A hook to manage state with an undo/redo history mechanism.                                                |\n| **useStateWithValidation** | A hook to manage state with validation, providing validity status.                                         |\n| **useLongPress**           | A hook to detect long press interactions on an element.                                                    |\n| **useDebugInformation**    | A hook to provide debugging information, including render count and changed props.                         |\n| **useEventListener**       | A hook to add an event listener to a specified element and clean up on unmount.                            |\n\n### Hook Documentation\n\nFor detailed information about each hook, check out the following links:\n\n- [useFetch Documentation](docs/useFetch.md)\n- [useAsync Documentation](docs/useAsync.md)\n- [useArray Documentation](docs/useArray.md)\n- [useClickOutside Documentation](docs/useClickOutside.md)\n- [useCookie Documentation](docs/useCookie.md)\n- [useCopyToClipboard Documentation](docs/useCopyToClipboard.md)\n- [useDebounce Documentation](docs/useDebounce.md)\n- [useDeepCompareEffect Documentation](docs/useDeepCompareEffect.md)\n- [useEffectOnce Documentation](docs/useEffectOnce.md)\n- [useGeolocation Documentation](docs/useGeolocation.md)\n- [useHover Documentation](docs/useHover.md)\n- [useMediaQuery Documentation](docs/useMediaQuery.md)\n- [useOnlineStatus Documentation](docs/useOnlineStatus.md)\n- [useOnScreen Documentation](docs/useOnScreen.md)\n- [usePrevious Documentation](docs/usePrevious.md)\n- [useRenderCount Documentation](docs/useRenderCount.md)\n- [useScript Documentation](docs/useScript.md)\n- [useStorage Documentation](docs/useStorage.md)\n- [useSessionStorage Documentation](docs/useSessionStorage.md)\n- [useLocalStorage Documentation](docs/useLocalStorage.md)\n- [useDarkMode Documentation](docs/useDarkMode.md)\n- [useTimeout Documentation](docs/useTimeout.md)\n- [useToggle Documentation](docs/useToggle.md)\n- [useUpdateEffect Documentation](docs/useUpdateEffect.md)\n- [useWindowSize Documentation](docs/useWindowSize.md)\n- [useStateWithHistory Documentation](docs/useStateWithHistory.md)\n- [useStateWithValidation Documentation](docs/useStateWithValidation.md)\n- [useLongPress Documentation](docs/useLongPress.md)\n- [useDebugInformation Documentation](docs/useDebugInformation.md)\n- [useEventListener Documentation](docs/useEventListener.md)\n\n## Contributing\n\nContributions are welcome! Please open an issue or submit a pull request if you have suggestions or improvements.\n\n1. Fork the repository.\n2. Create a new branch for your changes.\n3. Make your changes and test them.\n4. Submit a pull request.\n\n## License\n\nThis project is licensed under the MIT License. Check the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitszeeshan%2Freact-custom-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitszeeshan%2Freact-custom-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitszeeshan%2Freact-custom-hooks/lists"}