{"id":17772617,"url":"https://github.com/jamesplease/core-hooks","last_synced_at":"2025-03-15T16:31:38.292Z","repository":{"id":45489881,"uuid":"178491181","full_name":"jamesplease/core-hooks","owner":"jamesplease","description":"A (small) collection of useful React hooks","archived":false,"fork":false,"pushed_at":"2021-12-10T21:18:57.000Z","size":100,"stargazers_count":9,"open_issues_count":7,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-04-25T03:02:34.707Z","etag":null,"topics":["hooks","react","react-hooks"],"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/jamesplease.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-30T00:14:50.000Z","updated_at":"2022-07-08T07:43:04.000Z","dependencies_parsed_at":"2022-07-18T23:47:13.008Z","dependency_job_id":null,"html_url":"https://github.com/jamesplease/core-hooks","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/jamesplease%2Fcore-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesplease%2Fcore-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesplease%2Fcore-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesplease%2Fcore-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jamesplease","download_url":"https://codeload.github.com/jamesplease/core-hooks/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243760044,"owners_count":20343622,"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":["hooks","react","react-hooks"],"created_at":"2024-10-26T21:40:03.588Z","updated_at":"2025-03-15T16:31:37.990Z","avatar_url":"https://github.com/jamesplease.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Core Hooks\n\n[![Travis build status](http://img.shields.io/travis/jamesplease/core-hooks.svg?style=flat)](https://travis-ci.org/jamesplease/core-hooks)\n[![npm version](https://img.shields.io/npm/v/core-hooks.svg)](https://www.npmjs.com/package/core-hooks)\n[![gzip size](http://img.badgesize.io/https://unpkg.com/core-hooks/dist/core-hooks.cjs.production.min.js?compression=gzip)](https://unpkg.com/core-hooks/dist/core-hooks.cjs.production.min.js)\n\nA small collection of commonly-used custom [React Hooks](https://reactjs.org/docs/hooks-intro.html).\n\n## Motivation\n\nI regularly find myself reusing the same custom hooks in all of my projects, so I abstracted them into a library.\n\nThis collection of hooks is intended to remain reasonably sized.\n\n## Installation\n\nInstall using [npm](https://www.npmjs.com):\n\n```\nnpm install core-hooks\n```\n\nor [yarn](https://yarnpkg.com/):\n\n```\nyarn add core-hooks\n```\n\n## Hooks\n\n- [useConstant](#useconstant-valuefn-)\n- [useOnChange](#useonchange-value-callback-comparator-)\n- [usePrevious](#useprevious-value-)\n- [useIsMounted](#useismounted)\n- [useLatestRef](#uselatestref-value-)\n- [useMountTransition](#usemounttransition-options-)\n\n### `useConstant( valueFn )`\n\nA hook that guarantees a constant value. Similar to `useMemo`, except with the guarantee that the\ncached value will never be purged.\n\nUse `useMemo` when your application will not break if the value is recomputed. Use `useConstant` when\nthe value must never change.\n\n```js\nimport { useConstant } from 'core-hooks';\n\nuseConstant(() =\u003e createStore());\n```\n\n### `useOnChange( value, callback, [comparator] )`\n\nA hook that calls `callback` anytime that `value` changes. `callback` is\ncalled with two arguments: `(currentValue, previousValue)`.\n\nPass a `comparator` function to customize the comparison. It is called with two values,\n`currentValue` and `previousValue`. The default comparison is a strict equals (`===`).\n\nThis hook does not return any value.\n\n```js\nimport { useOnChange } from 'core-hooks';\n\nuseOnChange(isVisible, (isVisible, wasVisible) =\u003e {\n  if (isVisible \u0026\u0026 !wasVisible) {\n    console.log('It just became visible.');\n  }\n});\n```\n\n### `usePrevious( value )`\n\nThis hook returns the previous value of `value`.\n\n```js\nimport { usePrevious } from 'core-hooks';\n\nconst prevState = usePrevious(state);\n```\n\n\u003e Note: if you wish to detect _when_ a value changes, then you may want to consider\n\u003e [useOnChange](#use-on-change) instead.\n\n### `useIsMounted()`\n\nReturns a Boolean representing whether or not the component has mounted.\n\n```js\nimport { useIsMounted } from 'core-hooks';\n\nconst isMounted = useIsMounted();\n```\n\n### `useLatestRef( value )`\n\nReturns an up-to-date [ref](https://reactjs.org/docs/hooks-reference.html#useref) of `value`. This\nis useful when you need to access `value` in side effect callbacks in your component, such as\n`setTimeout`, `setInterval`, or user input events like key presses.\n\n```js\nimport { useState } from 'react';\nimport { useLatestRef } from 'core-hooks';\n\nconst [state, setState] = useState();\nconst stateRef = useLatestRef(state);\n```\n\n### `useMountTransition( options )`\n\nA hook that allows you to create transitions between two states. Common use cases are:\n\n- General two-state transitions (such as open and close)\n- Animated mounting/unmounting of a single component\n\nThe API was designed with both CSS and JS transitions in mind.\n\n#### `options`\n\n- `shouldBeMounted`: A Boolean representing which state the element is in\n- `transitionDurationMs`: _Optional_. How long the transition between the states lasts\n- `onEntering`: _Optional_. A callback that is called once the enter transition begins\n- `onEnter`: _Optional_. A callback that is called once the enter transition is complete\n- `onLeaving`: _Optional_. A callback that is called once the leave transition begins\n- `onLeave`: _Optional_. A callback that is called once the leave transition is complete\n- `onEnteringTimeout`: _Optional_. Pass `true` when using CSS Transitions. This creates a delay between the\n  `mount` and `applyActiveClass` booleans being flipped to `true`, so that\n  your mount CSS transition animates properly.\n  If you are not using CSS transitions, then you do not need to pass this option.\n\nThe following example demonstrates how you can use this hook for animating a component that\nis being mounted.\n\n```js\nimport { useMountTransition } from 'core-hooks';\nimport classnames from 'classnames';\n\nfunction MyComponent({ renderChildren }) {\n  const { mount, applyActiveClass, mountedState } = useMountTransition({\n    shouldBeMounted: renderChildren,\n    transitionDurationMs: 500,\n    onEnteringTimeout: true,\n  });\n\n  return (\n    \u003c\u003e\n      {mount \u0026\u0026 (\n        \u003cdiv\n          className={classnames('myDiv', {\n            'myDiv-active': applyActiveClass,\n          })}\u003e\n          This div animates in and out. The current state is {mountedState}.\n        \u003c/div\u003e\n      )}\n    \u003c/\u003e\n  );\n}\n```\n\n\u003e Note: This can be considered a Hook replacement of the react-transition-group\n\u003e [`Transition` component](https://reactcommunity.org/react-transition-group/transition),\n\u003e but _not_ for the [`TransitionGroup` component](https://reactcommunity.org/react-transition-group/transition-group).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamesplease%2Fcore-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamesplease%2Fcore-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamesplease%2Fcore-hooks/lists"}