{"id":13450226,"url":"https://github.com/stevenpersia/captain-hook","last_synced_at":"2025-04-06T11:10:44.418Z","repository":{"id":41274637,"uuid":"192047891","full_name":"stevenpersia/captain-hook","owner":"stevenpersia","description":"Custom React hooks for your project.","archived":false,"fork":false,"pushed_at":"2021-04-18T09:03:27.000Z","size":864,"stargazers_count":365,"open_issues_count":0,"forks_count":37,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-30T10:08:00.160Z","etag":null,"topics":["custom-hooks","hooks","react"],"latest_commit_sha":null,"homepage":"","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/stevenpersia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["stevenpersia"]}},"created_at":"2019-06-15T07:02:02.000Z","updated_at":"2025-02-26T13:58:06.000Z","dependencies_parsed_at":"2022-09-21T00:00:26.907Z","dependency_job_id":null,"html_url":"https://github.com/stevenpersia/captain-hook","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevenpersia%2Fcaptain-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevenpersia%2Fcaptain-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevenpersia%2Fcaptain-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevenpersia%2Fcaptain-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stevenpersia","download_url":"https://codeload.github.com/stevenpersia/captain-hook/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247471521,"owners_count":20944158,"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","hooks","react"],"created_at":"2024-07-31T07:00:32.475Z","updated_at":"2025-04-06T11:10:44.393Z","avatar_url":"https://github.com/stevenpersia.png","language":"JavaScript","funding_links":["https://github.com/sponsors/stevenpersia"],"categories":["Catalogs","JavaScript","合集"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eCaptain hook\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\u003cimg alt=\"captain hook\" src=\"./captain-hook.gif\" width=\"300\"/\u003e\u003c/p\u003e\n\n## Overview\n\nHere is a modest list of hooks that I use every day. I will add more in the next few days, keep watching. And if you have some good hooks I would love to add them. So feel free to open a pull request.\n\n## Hooks\n\n### `useFetch` - [View code](useFetch.js)\n\nUseful hook if you want to fetch data.\n\n#### How to use\n\nImport hook :\n\n```jsx\nimport useFetch from \"hooks/useFetch\";\n```\n\nThen use like this :\n\n```jsx\nconst { response, errors } = useFetch(\"https://github.com/stevenpersia/\");\n```\n\n#### Demo\n\n[View in CodeSandbox](https://codesandbox.io/s/captain-hookusefetch-2qmcr)\n\n---\n\n### `useFullScreen` - [View code](useFullScreen.js)\n\nUseful hook if you want to fullscreen an element of your page.\n\n#### How to use\n\nImport hook :\n\n```jsx\nimport useFullScreen from \"hooks/useFullScreen\";\n```\n\nAdd :\n\n```jsx\nconst { elementFS, triggerFS, exitFS, isFS } = useFullScreen();\n```\n\nThen use like this :\n\n```jsx\n\u003cdiv ref={elementFS}\u003eI want to fullscreen this div.\u003c/div\u003e\n\u003cbutton onClick={triggerFS}\u003eTrigger fullscreen\u003c/button\u003e\n\u003cbutton onClick={exitFS}\u003eExit fullscreen\u003c/button\u003e\n```\n\nCheck if fullscreen is triggered :\n\n```jsx\nconsole.log(isFS);\n```\n\n#### Demo\n\n[View in CodeSandbox](https://codesandbox.io/s/captain-hookusefullscreen-u6uih)\n\n---\n\n### `useHover` - [View code](useHover.js)\n\nUseful hook if you want to detect when the mouse is hovering an element.\n\n#### How to use\n\nImport hook :\n\n```jsx\nimport useHover from \"hooks/useHover\";\n```\n\nAdd :\n\n```jsx\nconst [hoverRef, isHovered, event] = useHover();\n```\n\nThen use like this :\n\n```jsx\n\u003cdiv ref={hoverRef}\u003e{isHovered ? \"Hovered ! at \" + [event.pageX, event.pageY].join(\",\") : \"Hover me !\"}\u003c/div\u003e\n```\n\n#### Demo\n\n[View in CodeSandbox](https://codesandbox.io/s/captain-hookusehover-ckmz2)\n\n---\n\n### `useKeyPress` - [View code](useKeyPress.js)\n\nUseful hook if you want to detect when user is pressing a specific key.\n\n#### How to use\n\nImport hook :\n\n```jsx\nimport useKeyPress from \"hooks/useKeyPress\";\n```\n\nThen use like this :\n\n```jsx\nconst hKeyPressed = useKeyPress(\"h\");\n\nconsole.log(hKeyPressed \u0026\u0026 \"Hello !\");\n// → Hello !\n```\n\n#### Demo\n\n[View in CodeSandbox](https://codesandbox.io/s/captain-hookusekeypress-neto1)\n\n---\n\n### `useTitle` - [View code](useTitle.js)\n\nUseful hook if you want to set a specific title to page.\n\n#### How to use\n\nImport hook :\n\n```jsx\nimport useTitle from \"hooks/useTitle\";\n```\n\nThen use like this :\n\n```jsx\nuseTitle(\"My title\");\n```\n\n#### Demo\n\n[View in CodeSandbox](https://codesandbox.io/s/captain-hookusetitle-py3uz)\n\n---\n\n### `useToggle` - [View code](useToggle.js)\n\nUseful hook if you want display/hide something with toggle.\n\n#### How to use\n\nImport hook :\n\n```jsx\nimport useToggle from \"hooks/useToggle\";\n```\n\nThen use like this :\n\n```jsx\nconst [open, toggle] = useToggle(false);\n\n\u003cButton onClick={toggle}\u003eShow filters\u003c/Button\u003e;\n\n{\n\topen \u0026\u0026 \u003cFilters /\u003e;\n}\n```\n\n#### Demo\n\n[View in CodeSandbox](https://codesandbox.io/s/captain-hookusetoggle-bqe9w)\n\n---\n\n### `useEventListener` - [View code](useEventListener.js)\n\nUseful hook if you want to create an event handler.\n\n#### How to use\n\nImport hook :\n\n```jsx\nimport useEventListener from \"hooks/useEventListener\";\n```\n\nThen use like this :\n\n```jsx\nconst [coords, setCoords] = useState({ x: 0, y: 0 });\n\nuseEventListener(\"mousemove\", ({ clientX, clientY }) =\u003e\n\tsetCoords({ x: clientX, y: clientY })\n);\n\nconsole.log(coords);\n```\n\n#### Demo\n\n[View in CodeSandbox](https://codesandbox.io/s/captain-hookuseeventlistener-rtrkc)\n\n---\n\n### `useInfiniteScroll` - [View code](useInfiniteScroll.js)\n\nUseful hook if you want to add the infinite scroll feature to your website.\n\n#### How to use\n\nImport hook :\n\n```jsx\nimport useInfiniteScroll from \"hooks/useInfiniteScroll\";\n```\n\nThen use like this :\n\n```jsx\nconst [isFetching, setIsFetching] = useInfiniteScroll(fetchData);\n\nconst fetchData = () =\u003e {\n\t// ...\n};\n```\n\n#### Demo\n\n[View in CodeSandbox](https://codesandbox.io/s/captain-hookuseinfinitescroll-5jd3n)\n\n---\n\n### `useFavicon` - [View code](useFavicon.js)\n\nUseful hook if you want to set a specific favicon to the page.\n\n#### How to use\n\nImport hook :\n\n```jsx\nimport useFavicon from \"hooks/useFavicon\";\n```\n\nThen use like this :\n\n```jsx\nuseFavicon(\"/path/image.png\", \"image/png\");\n```\n\n#### Demo\n\n[View in CodeSandbox](https://codesandbox.io/s/captain-hookusefavicon-1q52i)\n\n---\n\n### `useDebounce` - [View code](useDebounce.js)\n\nUseful hook if you want to set a debounced value.\n\n#### How to use\n\nImport hook :\n\n```jsx\nimport useDebounce from \"hooks/useDebounce\";\n```\n\nThen use like this :\n\n```jsx\nconst delay = 1000;\nconst debouncedValue = useDebounce(value, delay);\n```\n\n#### Demo\n\n[View in CodeSandbox](https://codesandbox.io/s/captain-hookusedebounce-m199m)\n\n---\n\n## Star, Fork, Clone \u0026 Contribute\n\nFeel free to contribute on this repository. If my work helps you, please give me back with a star. This means a lot to me and keeps me going!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstevenpersia%2Fcaptain-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstevenpersia%2Fcaptain-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstevenpersia%2Fcaptain-hook/lists"}