{"id":13450418,"url":"https://github.com/zakariaharti/react-hookedup","last_synced_at":"2025-08-03T15:40:33.672Z","repository":{"id":33826391,"uuid":"162760264","full_name":"zakariaharti/react-hookedup","owner":"zakariaharti","description":":alien: A collection of useful React hooks","archived":false,"fork":false,"pushed_at":"2023-01-04T00:49:22.000Z","size":6517,"stargazers_count":88,"open_issues_count":20,"forks_count":7,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-03T04:40:24.390Z","etag":null,"topics":["hooks","react","react-hooks","useful-utilities"],"latest_commit_sha":null,"homepage":"https://zakariaharti.github.io/react-hookedup","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/zakariaharti.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}},"created_at":"2018-12-21T21:45:20.000Z","updated_at":"2024-11-07T07:37:10.000Z","dependencies_parsed_at":"2023-01-15T03:00:41.318Z","dependency_job_id":null,"html_url":"https://github.com/zakariaharti/react-hookedup","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zakariaharti/react-hookedup","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zakariaharti%2Freact-hookedup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zakariaharti%2Freact-hookedup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zakariaharti%2Freact-hookedup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zakariaharti%2Freact-hookedup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zakariaharti","download_url":"https://codeload.github.com/zakariaharti/react-hookedup/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zakariaharti%2Freact-hookedup/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267454935,"owners_count":24089959,"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","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","useful-utilities"],"created_at":"2024-07-31T07:00:34.460Z","updated_at":"2025-08-03T15:40:33.566Z","avatar_url":"https://github.com/zakariaharti.png","language":"TypeScript","funding_links":[],"categories":["Packages","TypeScript"],"sub_categories":[],"readme":"![react hookedup](/header.png)\n\n[![npm](https://img.shields.io/npm/v/react-hookedup.svg?style=for-the-badge)](https://www.npmjs.com/package/react-hookedup)\n [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge)](https://github.com/zakariaharti/react-hookedup/blob/master/LICENSE.md)\n[![Storybook](https://img.shields.io/badge/docs-storybook-pink.svg?style=for-the-badge)](https://zakariaharti.github.io/react-hookedup/)\n\n\u003eHooks require at least React 16.8\n\n## Installation\n\n**using npm**\n\n```\nnpm install react-hookedup --save\n```\n\n**using yarn**\n\n```\nyarn add react-hookedup\n```\n\n# Demo\nVisit [here](https://zakariaharti.github.io/react-hookedup)\n\n# hooks\n\n### `common hooks`\n\n| Name                                    | Description            | Arguments        | Returns     |\n| ---------------------------------------- | --------------------- | ----------------- | ----------- |\n| [useArray](#useArray) | useful hook for manipulating arrays  | initial value | {value, setValue, removeById, removeIndex, clear} |\n| [useBoolean](#useBoolean) | useful hook for manipulating booleans  | initial value | {value, setValue, toggle, setTrue, setFalse} |\n| [useCounter](#useCounter) | counter hook  | value,{upperLimit,lowerLimit,step,loop} | {value, setValue, increase,decrease} |\n| [useFocus](#useFocus) | focus hook | null | {focused, bind} |\n| [useHover](#useHover) | hover hook | null | {hovered, bind} |\n| [useInput](#useInput) | input handling hook | initial value | {value, setValue, onChange, bindToInput, bind, hasValue, clear} |\n\n### `lifecycles hooks`\n\n| Name                                    | Description            | Arguments        | Returns     |\n| ---------------------------------------- | --------------------- | ----------------- | ----------- |\n| [useLifecycleHooks](#useLifecycleHooks) | use lifecycle methods  | {onMount, onUnmount} | void |\n| [useOnMount](#useOnMount) | componentDidMount like lifecycle  | Function | void |\n| [useOnUnmount](#useOnUnmount) | componentWillUnmount like lifecycle  | Function | void |\n| [useMergeState](#useMergeState) | merge the previous state with new one | initial value of the state | {setState: Function, state} |\n| [usePrevious](#usePrevious) | get the previous value of the state | initial value of the state | the previous value |\n\n### `timers hooks`\n\n| Name                                    | Description            | Arguments        | Returns     |\n| ---------------------------------------- | --------------------- | ----------------- | ----------- |\n| [useInterval](#useInterval) | use setInterval via hooks  | {function, delay} | void |\n| [useTimeout](#useTimeout) | use setTimeout via hooks | {function, delay} | void |\n\n### `network hooks`\n\n| Name                                    | Description            | Arguments        | Returns     |\n| ---------------------------------------- | --------------------- | ----------------- | ----------- |\n| [useOnLineStatus](#useOnLineStatus) | check if the browser is connected to the internet  | null| {online} |\n\n# Usage\n\n### `useArray`\n\n```js\nimport { useArray } from 'react-hookedup';\n\nconst ExampleUseArray = () =\u003e {\n  const {\n    add,\n    clear,\n    removeIndex,\n    value: currentArray\n  } = useArray(['cat','dog','bird']);\n\n  const {\n    bindToInput,\n    value\n  } = useInput('');\n\n  const {\n    bindToInput: bindToInput2,\n    value: value2\n  } = useInput('');\n\n  return(\n    \u003cdiv\u003e\n      \u003cp\u003e\n        current array is : {JSON.stringify(currentArray)}\n      \u003c/p\u003e\n      \u003cdiv\u003e\n        add element :\n        \u003cinput {...bindToInput}  /\u003e\n        \u003cbutton onClick={() =\u003e add(value)}\u003eadd\u003c/button\u003e\n      \u003c/div\u003e\n      \u003cdiv\u003e\n        remove element by index :\n        \u003cinput {...bindToInput2}  /\u003e\n        \u003cbutton onClick={() =\u003e removeIndex(value2)}\u003edelete\u003c/button\u003e\n      \u003c/div\u003e\n      \u003cdiv\u003e\n        delete all items :\n        \u003cbutton onClick={() =\u003e clear()}\u003eclear\u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  )\n};\n```\n\n### `useBoolean`\n\n```js\nimport { useBoolean } from 'react-hookedup';\n\nconst ExampleUseBoolean = () =\u003e {\n  const {toggle, value} = useBoolean(false);\n\n  return(\n    \u003cdiv\u003e\n      \u003cp\u003e{JSON.stringify(value)}\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e toggle()}\u003etoggle\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\nMethods:\n\n- `toggle`\n- `setTrue`\n- `setFalse`\n\n\n### `useOnMount`\n\n```jsx\nimport { useOnMount } from 'react-hookedup';\n\nconst App = () =\u003e {\n  useOnMount(() =\u003e console.log(\"hello world\"));\n  return \u003cdiv\u003e hello world \u003c/div\u003e;\n};\n```\n\n### `useOnUnmount`\n\n```jsx\nconst App = () =\u003e {\n  useOnUnmount(() =\u003e console.log(\"goodbye world\"));\n  return \u003cdiv\u003e goodbye world \u003c/div\u003e;\n};\n```\n\n### `useLifecycleHooks`\n\n```jsx\nconst App = () =\u003e {\n  useLifecycleHooks({\n    onMount: () =\u003e console.log(\"mounted!\"),\n    onUnmount: () =\u003e console.log(\"unmounting!\")\n  });\n\n  return \u003cdiv\u003e hello world \u003c/div\u003e;\n};\n```\n\n### `useCounter`\n\n```jsx\nconst counter = useCounter(0);\nconst limitedNumber = useCounter(3, { upperLimit: 5, lowerLimit: 3 });\nconst rotatingNumber = useCounter(0, {\n  upperLimit: 5,\n  lowerLimit: 0,\n  loop: true\n});\n```\n\nMethods:\n\nBoth `increase` and `decrease` take an optional `amount` argument which is 1 by default, and will override the `step` property if it's used in the options.\n\n- `increase(amount = 1)`\n- `decrease(amount = 1 )`\n\nOptions:\n\n- `lowerLimit`\n- `upperLimit`\n- `loop`\n- `step` - sets the increase/decrease amount of the number upfront, but it can still be overriden by `number.increase(3)` or `number.decrease(5)`\n\n### `useInput`\n\n```jsx\nconst newTodo = useInput(\"\");\n```\n\n```jsx\n\u003cinput value={newTodo.value} onChange={newTodo.onChange} /\u003e\n```\n\n```jsx\n\u003cinput {...newTodo.bindToInput} /\u003e\n\u003cSlider {...newTodo.bind} /\u003e\n```\n\nMethods:\n\n- `clear`\n- `onChange`\n- `bindToInput` - binds the `value` and `onChange` props to an input that has `e.target.value`\n- `bind` - binds the `value` and `onChange` props to an input that's using only `e` in `onChange` (like most external components)\n\nProperties:\n\n- `hasValue`\n\n### `useFocus`\n\n```jsx\nconst ExampleUseFocus = () =\u003e {\n  const {focused, bind} = useFocus();\n\n  return(\n    \u003cdiv\u003e\n      \u003cp\u003ethis is input is : {focused ? 'focused' : 'not focused'}\u003c/p\u003e\n      \u003cinput {...bind}  /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n### `useHover`\n\n```jsx\nconst ExampleUseHover = () =\u003e {\n  const {hovered, bind} = useHover();\n\n  return(\n    \u003cdiv\u003e\n      \u003cp\u003ethis is input is : {hovered ? 'hovered' : 'not hovered'}\u003c/p\u003e\n      \u003cinput {...bind}  /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n### `useArray`\n\n```jsx\nconst todos = useArray([]);\n```\n\nMethods:\n\n- `add`\n- `clear`\n- `removeIndex`\n- `removeById`\n\n### useMergeState\n\n```jsx\nconst { state, setState } = useMergeState({ loading: false });\nsetState({ loading: true, data: [1, 2, 3] });\n```\n\nMethods:\n\n- `setState(value)` - will merge the `value` with the current `state` (like this.setState works in React)\n\nProperties:\n\n- `state` - the current state\n\n### `usePrevious`\n\nUse it to get the previous value of a prop or a state value.  \nIt's from the official [React Docs](https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state).  \nIt might come out of the box in the future.\n\n```jsx\nconst Counter = () =\u003e {\n  const [count, setCount] = useState(0);\n  const prevCount = usePrevious(count);\n  return (\n    \u003ch1\u003e\n      Now: {count}, before: {prevCount}\n    \u003c/h1\u003e\n  );\n};\n```\n\n### `useInterval`\n\n```jsx\nconst useIntervalExample = () =\u003e {\n  useInterval(() =\u003e alert('hello world'), 1500);\n\n  return (\n    \u003ch1\u003e\n      I will alert in 1.5 s\n    \u003c/h1\u003e\n  );\n};\n```\n\n### `useTimeout`\n\n```jsx\nconst useTimeoutExample = () =\u003e {\n  useTimeout(() =\u003e alert('hello world'), 1500);\n\n  return (\n    \u003ch1\u003e\n      I will alert in 1.5 s\n    \u003c/h1\u003e\n  );\n};\n```\n\n### `useOnLineStatus`\n\n```jsx\nconst useOnLineStatusExample = () =\u003e {\n  const {online} = useOnLineStatus();\n\n  return (\n    \u003ch1\u003e\n      you are : {online ? 'online' : 'offline'}\n    \u003c/h1\u003e\n  );\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzakariaharti%2Freact-hookedup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzakariaharti%2Freact-hookedup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzakariaharti%2Freact-hookedup/lists"}