{"id":13429550,"url":"https://github.com/beizhedenglong/react-hooks-lib","last_synced_at":"2025-04-12T22:35:00.808Z","repository":{"id":48108421,"uuid":"154783684","full_name":"beizhedenglong/react-hooks-lib","owner":"beizhedenglong","description":"A set of reusable React Hooks.","archived":false,"fork":false,"pushed_at":"2021-08-06T08:14:17.000Z","size":86946,"stargazers_count":544,"open_issues_count":0,"forks_count":27,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-04T02:08:42.583Z","etag":null,"topics":["hooks","react","react-hooks","utils"],"latest_commit_sha":null,"homepage":"https://beizhedenglong.github.io/react-hooks-lib","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/beizhedenglong.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":["beizhedenglong"]}},"created_at":"2018-10-26T05:49:52.000Z","updated_at":"2025-03-21T15:24:12.000Z","dependencies_parsed_at":"2022-08-22T05:00:58.381Z","dependency_job_id":null,"html_url":"https://github.com/beizhedenglong/react-hooks-lib","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beizhedenglong%2Freact-hooks-lib","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beizhedenglong%2Freact-hooks-lib/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beizhedenglong%2Freact-hooks-lib/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beizhedenglong%2Freact-hooks-lib/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beizhedenglong","download_url":"https://codeload.github.com/beizhedenglong/react-hooks-lib/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248642308,"owners_count":21138350,"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","utils"],"created_at":"2024-07-31T02:00:41.597Z","updated_at":"2025-04-12T22:35:00.786Z","avatar_url":"https://github.com/beizhedenglong.png","language":"JavaScript","funding_links":["https://github.com/sponsors/beizhedenglong"],"categories":["Packages","JavaScript","Extensions/Libraries"],"sub_categories":[],"readme":"# React Hooks Lib \u0026middot; ![](https://img.shields.io/github/license/beizhedenglong/react-hooks-lib.svg) [![Build Status](https://travis-ci.org/beizhedenglong/react-hooks-lib.svg?branch=master)](https://travis-ci.org/beizhedenglong/react-hooks-lib) [![Coverage Status](https://coveralls.io/repos/github/beizhedenglong/react-hooks-lib/badge.svg?branch=master\u0026service=github)](https://coveralls.io/github/beizhedenglong/react-hooks-lib?branch=master)\n\nA set of reusable [React Hooks](https://reactjs.org/docs/hooks-reference.html#usestate).\n\n\u003eHooks are a new addition in React 16.8. They let you use state and other React features without writing a class.\n\n## Installation\n`npm i react-hooks-lib --save`\n\n## Examples\nVisit [storybook](https://beizhedenglong.github.io/react-hooks-lib)\n\n## Hooks\n\n| Name                                                     | Arguments                          | Returns                                                         |\n| -------------------------------------------------------- | ---------------------------------- | --------------------------------------------------------------- |\n| \u003ch6\u003eLifecycles\u003c/h6\u003e                                      |                                    |                                                                 |\n| [`useDidMount`](#usedidmountf)                           | f                                  | -                                                               |\n| [`useWillUnmount`](#usewillunmountf)                     | f                                  | -                                                               |\n| [`useDidUpdate`](#usedidupdatef-options)                 | f, conditions                      | -                                                               |\n| \u003ch6\u003eState\u003c/h6\u003e                                           |                                    |                                                                 |\n| [`createContextState`](#createContextStateInitial)       | initial                            | { ContextProvider, ContextConsumer,  set, useSelector, useSet } |\n| [`createGlobalState`](#createGlobalStateInitial)         | initial                            | { GlobalProvider, GlobalConsumer, set, useSelector, useSet }    |\n| [`useMergeState`](#usemergestateinitial)                 | initial                            | { state, set }                                                  |\n| [`useNestedState`](#usenestedstate)                      | initial                            | { state, get, set }                                             |\n| `useBind`                                                | Please visit storybook             | Please visit storybook                                          |\n| `useNestedBind`                                          | Please visit storybook             | Please visit storybook                                          |\n| [`useStateCallback`](#useStateCallbackInitial-f)         | initial, f                         | { state, set }                                                  |\n| [`useUndo`](#useUndoInitial)                             | initial                            | { past, present, future, set, undo, redo }                      |\n| [`useCounter`](#useCounterInitial)                       | initial                            | { count, set, reset, inc, dec }                                 |\n| [`useToggle`](#useToggleInitial)                         | initial                            | { on, set, reset, toggle }                                      |\n| [`useList`](#useListInitial)                             | initial                            | { list, set, reset, push, sort, filter }                        |\n| [`useMap`](#useMapInitial)                               | initial                            | { values, set, reset, clear, get, has, del }                    |\n| \u003ch6\u003eEffect\u003c/h6\u003e                                          |                                    |                                                                 |\n| `useShallowEqualEffect`                                  | f, deps                            | -                                                               |\n| `useDeepEqualEffect`                                     | f, deps                            | -                                                               |\n| \u003ch6\u003eNetwork\u003c/h6\u003e                                         |                                    |                                                                 |\n| [`useFetch`](#useFetchInitialUrl-initialOptions-onMount) | initialUrl, initialOptions, config | { loading, data, error, fetch, setUrl, setOptions, setData }    |\n| [`useOnlineStatus`](#useonlinestatus)                    |                                    |                                                                 |\n| \u003ch6\u003eFeedback\u003c/h6\u003e                                        |                                    |                                                                 |\n| [`useHover`](#useHover)                                  | -                                  | { hovered, bind }                                               |\n| [`useActive`](#useActive)                                | -                                  | { active, bind }                                                |\n| [`useFocus`](#useFocus)                                  | -                                  | { focused, bind }                                               |\n| [`useTouch`](#useTouch)                                  | -                                  | { touched, bind }                                               |\n| \u003ch6\u003eData Entry\u003c/h6\u003e                                      |                                    |                                                                 |\n| [`useField`](#useFieldInitial)                           | initial                            | { value, set, reset, bind }                                     |\n| \u003ch6\u003eAsync\u003c/h6\u003e                                           |                                    |                                                                 |\n| `useAsync`                                               | f                                  | { f, loading }                                                  |\n\n\n## API\n\n### `useDidMount(f)`\nSimilar to `componentDidMount` in React class component. \n#### Arguments\n- `f: () =\u003e void`: f is  called when component did mount.\n```js\nimport { useDidMount } from 'react-hooks-lib'\n\nconst MyComponent = () =\u003e {\n  useDidMount(() =\u003e {\n    console.log('didMount')\n  })\n}\n```\n\n### `useWillUnmount(f)`\nClose to the `componentWillUnmount` in React class component.\n#### Arguments\n- `f: () =\u003e void`: f is called when component will unmount.\n```js\nimport { useWillUnmount } from 'react-hooks-lib'\n\nconst MyComponent = () =\u003e {\n  useWillUnmount(() =\u003e {\n    console.log('willUnmount')\n  })\n}\n```\n\n### `useDidUpdate(f, options?)`\nSimilar to `componentDidUpdate`, it only runs on updates.\n#### Arguments\n- `f: () =\u003e Function | void`: f is called on every updates. Like `useEffect`, f can return a clean-up function.\n- `conditions?: Array\u003cany\u003e`: Optional array for conditionally firing an effect, same as the second argument passed to `useEffect`.\n```js\nimport { useDidUpdate, useCounter } from 'react-hooks-lib'\n\nconst MyComponent = () =\u003e {\n  const { count, inc } = useCounter(0)\n  useDidUpdate(() =\u003e {\n    console.log('DidUpdate')\n  })\n  return (\n    \u003cdiv\u003e\n      {`count: ${count}`}\n      \u003cbutton onClick={() =\u003e inc(1)}\u003e+1\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n### `createContextState(initial?)`\n\n### `createGlobalState(initial?)`\n\n### `useMergeState(initial?)`\n#### Arguments\n- `initial?: Object`: Initial state object, default is `{}`.\n#### Returns\n- `state: Object`: Current state object.\n- `set: ((Object) =\u003e Object) | Object`: Like `setState` in React class component, merge the old and new state together.\n```js\nimport { useMergeState } from 'react-hooks-lib'\n\nconst MergeState = () =\u003e {\n  const { state, set } = useMergeState({ name: 'Victor', age: 1 })\n  return (\n    \u003cdiv\u003e\n      \u003ch3\u003euseMergeState\u003c/h3\u003e\n      \u003cdiv\u003e\n        {`state: ${JSON.stringify(state)}`}\n        \u003cbutton onClick={() =\u003e set(({ age }) =\u003e ({ age: age + 1 }))}\u003eage+1\u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  )\n}\n```\n### `useNestedState`\n#### Arguments\n- `initial?`: Initial state, default is `undefined`.\n#### Returns\n- `state`: Current state.\n- `get(pathString, defaultValue)`: Get value form state at a specific `pathString`. eg: `get(\"a.b.c\")`/`get(\"\" | undefined)`, if `pathString` is empty,it will return the state object.\n- `set: (pathString, newValue | prevValue =\u003e newValue)`: Set value at a specific `pathString`. eg: `set(\"a.b.c\", prev =\u003e prev + 1)`/`set(\"\" | undefined, {})`. if `pathString` is empty,it will set the entire state object.\n\n### `useStateCallback(initial, f?)`\n\n### `useUndo(initial)`\n\n### `useCounter(initial)`\n```js\nimport { useCounter } from 'react-hooks-lib'\n\nconst Counter = () =\u003e {\n  const {\n    count, inc, dec, reset,\n  } = useCounter(1)\n  return (\n    \u003cdiv\u003e\n      {count}\n      \u003cbutton onClick={() =\u003e inc(1)}\u003e+1\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e dec(1)}\u003e-1\u003c/button\u003e\n      \u003cbutton onClick={reset}\u003ereset\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n\n```\n### `useToggle(initial)`\n```js\nimport { useToggle } from 'react-hooks-lib'\n\nconst Toggle = () =\u003e {\n  const { on, toggle, reset } = useToggle(false)\n  return (\n    \u003cdiv\u003e\n      {String(on)}\n      \u003cbutton onClick={toggle}\u003etoggle\u003c/button\u003e\n      \u003cbutton onClick={reset}\u003ereset\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### `useList(initial)`\n```js\nimport { useList } from 'react-hooks-lib'\nconst List = () =\u003e {\n  const { list, sort, filter } = useList([1, 4, 2, 3, 4, 2, 6, 8, 3, 4])\n  return (\n    \u003cdiv\u003e\n      list:\n      {JSON.stringify(list)}\n      \u003cbutton onClick={() =\u003e sort((x, y) =\u003e x - y)}\u003esort\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e filter(x =\u003e x \u003e= 4)}\u003e greater than or equal to 4\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### `useMap(initial)`\n\n### `useFetch(initialUrl, initialOptions?, onMount?)`\n```js\nimport { useField, useFetch } from 'react-hooks-lib'\n\nconst Fetch = () =\u003e {\n  const getUrl = text =\u003e `https://api.github.com/search/repositories?q=${text}`\n  const { value, bind } = useField('react')\n  const { data, loading, setUrl } = useFetch(getUrl('react'))\n  return (\n    \u003cdiv\u003e\n      \u003ch3\u003euseFetch\u003c/h3\u003e\n      \u003cinput type=\"text\" value={value} {...bind} /\u003e\n      \u003cbutton onClick={() =\u003e {\n        setUrl(getUrl(value))\n      }}\n      \u003e\n        search\n      \u003c/button\u003e\n      {\n        loading\n          ? \u003cdiv\u003eLoading...\u003c/div\u003e\n          : (\u003cspan\u003e{`total_count: ${data.total_count}`}\u003c/span\u003e)\n      }\n    \u003c/div\u003e\n  )\n}\n```\n\n### `useOnlineStatus()`\n\n### `useHover()`\n\n``` js\nimport { useHover } from 'react-hooks-lib'\n\nconst Hover = () =\u003e {\n  const { hovered, bind } = useHover()\n  return (\n    \u003cdiv\u003e\n      \u003cdiv {...bind}\u003e\n        hovered:\n        {String(hovered)}\n      \u003c/div\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### `useActive()`\n\n### `useFocus()`\n\n### `useTouch()`\n\n### `useField(initial)`\n```js\n  import {useField} from 'react-hooks-lib'\n\n  const Input = () =\u003e {\n    const { value, bind } = useField('Type Here...')\n\n    return (\n      \u003cdiv\u003e\n        input text:\n        {value}\n        \u003cinput type=\"text\" {...bind} /\u003e\n      \u003c/div\u003e\n    )\n  }\n\n  const Select = () =\u003e {\n    const { value, bind } = useField('apple')\n    return (\n      \u003cdiv\u003e\n        selected:\n        {value}\n        \u003cselect {...bind}\u003e\n          \u003coption value=\"apple\"\u003eapple\u003c/option\u003e\n          \u003coption value=\"orange\"\u003eorange\u003c/option\u003e\n        \u003c/select\u003e\n      \u003c/div\u003e\n    )\n  }\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeizhedenglong%2Freact-hooks-lib","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeizhedenglong%2Freact-hooks-lib","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeizhedenglong%2Freact-hooks-lib/lists"}