{"id":13450229,"url":"https://github.com/chrisjpatty/crooks","last_synced_at":"2025-04-09T14:14:14.099Z","repository":{"id":57210745,"uuid":"170631517","full_name":"chrisjpatty/crooks","owner":"chrisjpatty","description":"A collection of eclectic react hooks","archived":false,"fork":false,"pushed_at":"2023-03-19T01:51:44.000Z","size":205,"stargazers_count":215,"open_issues_count":2,"forks_count":8,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-02T11:02:50.571Z","etag":null,"topics":["collection","hooks","react","react-hooks","use"],"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/chrisjpatty.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}},"created_at":"2019-02-14T05:15:37.000Z","updated_at":"2024-09-10T19:13:58.000Z","dependencies_parsed_at":"2022-08-31T05:02:33.339Z","dependency_job_id":"951b569b-2772-459d-9618-e40b2a43a1e4","html_url":"https://github.com/chrisjpatty/crooks","commit_stats":{"total_commits":42,"total_committers":1,"mean_commits":42.0,"dds":0.0,"last_synced_commit":"fa852a4cb0828aa6b45b5ddc5a7c7b76f31149d6"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisjpatty%2Fcrooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisjpatty%2Fcrooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisjpatty%2Fcrooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisjpatty%2Fcrooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrisjpatty","download_url":"https://codeload.github.com/chrisjpatty/crooks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248054193,"owners_count":21039952,"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":["collection","hooks","react","react-hooks","use"],"created_at":"2024-07-31T07:00:32.501Z","updated_at":"2025-04-09T14:14:14.075Z","avatar_url":"https://github.com/chrisjpatty.png","language":"JavaScript","funding_links":[],"categories":["Catalogs","合集"],"sub_categories":[],"readme":"![Crooks](https://raw.githubusercontent.com/chrisjpatty/crooks/master/logo.png)\n\n# crooks ![Travis (.org)](https://img.shields.io/travis/chrisjpatty/crooks.svg) [![](https://img.shields.io/npm/v/crooks.svg?style=flat)](https://www.npmjs.com/package/crooks) [![Coverage Status](https://coveralls.io/repos/github/chrisjpatty/crooks/badge.svg?branch=master)](https://coveralls.io/github/chrisjpatty/crooks?branch=master) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n\nA collection of useful react hooks by [@chrisjpatty](https://github.com/chrisjpatty).\n\n# Installing\n\n```bash\nyarn add crooks\n```\n\n```bash\nnpm install crooks --save\n```\n\n## Available Hooks\n\n- [useLocalStorage](https://www.github.com/chrisjpatty/crooks#useLocalStorage)\n- [useFiler](https://www.github.com/chrisjpatty/crooks#useFiler)\n- [useKeyboardShortcut](https://www.github.com/chrisjpatty/crooks#useKeyboardShortcut)\n- [useOnClickOutside](https://www.github.com/chrisjpatty/crooks#useOnClickOutside)\n\n# useLocalStorage\n\n`useLocalStorage` behaves just like the native react `useState` hook, except that any and all state updates are automatically saved in the browser\\'s localstorage under the provided key. The first argument is the name of the key to save it under, and the second argument is the initial value. The hook returns the current state and an updater function just like `useState`.\n\nWhen the app reloads, the hook will first look for a previously cached value. If one is found, it will be used as the initial value instead of the provided initial value.\n\n```jsx\nimport { useLocalStorage } from \"crooks\";\n\nconst App = () =\u003e {\n  const [state, setState] = useLocalStorage(\"LOCAL_STORAGE_KEY\", initialValue);\n\n  return \u003cdiv\u003eApp\u003c/div\u003e;\n};\n```\n\n# useFiler\n\n`useFiler` manages a simple virtual file system using the browser\\'s localstorage. This is especially useful for quick prototyping. Any type of data can be saved in a file provided that it's JSON-serializable.\n\n### Basic Usage\n\nWhen the hook is first initialized it returns the files as an empty object.\n\n```jsx\nimport { useFiler } from \"crooks\";\n\nconst App = () =\u003e {\n  const [files, { add, remove, update, clear }] = useFiler(\"LOCAL_STORAGE_KEY\");\n\n  return \u003cdiv\u003eApp\u003c/div\u003e;\n};\n```\n\n#### File Structure\n\nBy default, each file has an automatically generated id generated using the [shortid](https://www.npmjs.com/package/shortid) package. Each single file is structured as follows:\n\n```\n{\n  id: \"ogn41na\",\n  created: 489108491,\n  modified: 489108561,\n  data: \"The file's data.\"\n}\n```\n\nThe `files` object returned as the first parameter of the hook represents all of the current files as an object, with each file's ID as the key, and the file as the value.\n\n#### Adding Files\n\nThe first parameter of the add function may be any JSON-serializable data and is required. The data will be saved as a new file with an automatically generated ID. If you would like to override the automatically-generated ID, you may pass a String or Int as the second parameter and it will be used as the ID. If the ID already exists, the existing file will be overwritten.\n\n```jsx\nadd(\"Any JSON-serializable data to be saved as a new file.\");\n```\n\n#### Updating Files\n\nTo update a file, pass as the first parameter, the ID of the file you want to update. The second parameter is the data you want to overwrite the file with.\n\n```jsx\nupdate(\"jal31af\", \"The new data to overwrite the file with.\");\n```\n\nAs with the native `useState`, `update()` accepts a callback function injected with the previous file.\n\n```jsx\nupdate(\"jal31af\", (file) =\u003e [...file.data, \"New item\"]);\n```\n\n#### Removing Files\n\nThe remove function simply accepts a file ID of the file you wish to remove.\n\n```jsx\nremove(\"zoep31a\");\n```\n\n#### Clearing all Files\n\n```jsx\nclear();\n```\n\n# useKeyboardShortcut\n\nThe `useKeyboardShortcut` hook listens to \"keydown\" events on the Document, and will call the provided action when the specified Javascript keyCode is detected. The shortcut listener is enabled by default, but can be declaratively disabled by passing `disabled: true` to the hook.\n\n[keyboard.info](https://keycode.info) is a great resource for finding Javascript keyCodes.\n\n#### Basic Usage\n\n```jsx\nimport { useKeyboardShortcut } from \"crooks\";\n\nconst App = () =\u003e {\n  const submit = () =\u003e {\n    console.log(\"Submitted\");\n  };\n\n  const { enable, disable } = useKeyboardShortcut({\n    key: \"Enter\",\n    onKeyPressed: submit,\n    disabled: false, // This key is not required\n  });\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={enable}\u003eEnable\u003c/button\u003e\n      \u003cbutton onClick={disable}\u003eDisable\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\nWith keyboard shortcuts, there are times when you may want to imperatively enable or disable the shortcut listener. For these occasions, the hook returns `enable` and `disable` functions.\n\n# useOnClickOutside\n\n`useOnClickOutside` accepts a function that will be called when there's a click outside of a target element. The hook returns a ref, which you pass to the ref attribute of the element you want to target.\n\n#### Basic Usage\n\n```jsx\nimport { useOnClickOutside } from \"crooks\";\n\nconst App = () =\u003e {\n  const handleClickOutside = () =\u003e {\n    console.log(\"You clicked outside of the blue box\");\n  };\n\n  const outsideRef = useOnClickOutside(handleClickOutside);\n\n  return (\n    \u003cdiv\u003e\n      \u003cdiv ref={outsideRef}\u003e I'm a blue box \u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n#### Disabling the listener\n\nFor performance reasons, you may not want to always listen for clicks outside of an element. For these times you can pass a `Boolean` as a second parameter to this hook representing whether or not the listener should be disabled like so:\n\n```jsx\nimport { useState } from \"react\";\nimport { useOnClickOutside } from \"crooks\";\n\nconst App = () =\u003e {\n  const [isDisabled, setIsDisabled] = useState(false);\n\n  const disableOnOutside = () =\u003e setIsDisabled(true);\n\n  const handleClickOutside = () =\u003e {\n    console.log(\"You clicked outside of the blue box\");\n  };\n\n  const outsideRef = useOnClickOutside(handleClickOutside, isDisabled);\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={disableOnOutside}\u003e\n        Stop listening for outside clicks\n      \u003c/button\u003e\n      \u003cdiv ref={outsideRef}\u003e I'm a blue box \u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisjpatty%2Fcrooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrisjpatty%2Fcrooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisjpatty%2Fcrooks/lists"}