{"id":13422494,"url":"https://github.com/salvoravida/react-universal-hooks","last_synced_at":"2025-04-09T10:07:43.688Z","repository":{"id":34280660,"uuid":"173680128","full_name":"salvoravida/react-universal-hooks","owner":"salvoravida","description":":tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!","archived":false,"fork":false,"pushed_at":"2023-01-06T01:41:32.000Z","size":496,"stargazers_count":189,"open_issues_count":2,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-02T03:55:14.165Z","etag":null,"topics":["class","hook","hooks","react","react-hook","react-hooks","react-use","rehooks"],"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/salvoravida.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2019-03-04T05:36:24.000Z","updated_at":"2024-11-07T00:32:08.000Z","dependencies_parsed_at":"2023-01-15T05:51:41.617Z","dependency_job_id":null,"html_url":"https://github.com/salvoravida/react-universal-hooks","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salvoravida%2Freact-universal-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salvoravida%2Freact-universal-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salvoravida%2Freact-universal-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salvoravida%2Freact-universal-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/salvoravida","download_url":"https://codeload.github.com/salvoravida/react-universal-hooks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248018060,"owners_count":21034048,"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":["class","hook","hooks","react","react-hook","react-hooks","react-use","rehooks"],"created_at":"2024-07-30T23:00:46.164Z","updated_at":"2025-04-09T10:07:43.668Z","avatar_url":"https://github.com/salvoravida.png","language":"JavaScript","funding_links":[],"categories":["Code Design","Tools","JavaScript","工具"],"sub_categories":["Miscellaneous"],"readme":"\n# react-universal-hooks [![npm version](https://img.shields.io/npm/v/react-universal-hooks.svg?style=flat)](https://www.npmjs.org/package/react-universal-hooks) \n\nReact Universal Hooks : just use****** everywhere. Support React \u003e= 16.8.0\n\nInstallation\n-----------\nUsing [npm](https://www.npmjs.com/):\n\n    $ npm install --save react-universal-hooks\n\nOr [yarn](https://yarnpkg.com/):\n\n    $ yarn add react-universal-hooks\n\nUsage\n-----    \njust add one line import!\n\nindex.js\n```javascript\nimport \"react-universal-hooks\";\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n\n  ReactDOM.render(\n      \u003cApp /\u003e,\n    document.getElementById('root'),\n  );\n```\n\nDemo\n---\nhttps://codesandbox.io/s/jnnnw158j5\n\n```javascript\nimport React, { useState, useContext } from \"react\";\nimport { useWindowSize } from \"./useWindowSize\";\n\nconst MyContext = React.createContext({ myLabel: \"MyContextLabel\" });\n\nconst Functional = () =\u003e {\n  const [count, setCount] = useState(0);\n  const { width, height } = useWindowSize();\n  const { myLabel } = useContext(MyContext);\n  return (\n    \u003cReact.Fragment\u003e\n      \u003cp\u003e{myLabel}\u003c/p\u003e\n      \u003cp\u003e{\"Functional windowSize : \" + width + \"x\" + height}\u003c/p\u003e\n      \u003cp\u003e{\"Functional Counter \" + count}\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e setCount(c =\u003e c + 1)}\u003eFunctional Counter\u003c/button\u003e\n    \u003c/React.Fragment\u003e\n  );\n};\n\nclass Component extends React.PureComponent {\n   constructor(props) {\n      super(props);\n      this.state = { /* your already existing business logic here */ };\n    }\n    componentDidMount (){ /* your already existing business logic here */}\n    componentDidUpdate (){ /* your already existing business logic here */}\n    componentUnmount (){ /* your already existing business logic here */} \n  render() {\n    const [count, setCount] = useState(0);\n    const { width, height } = useWindowSize();\n    const { myLabel } = useContext(MyContext);\n    return (\n      \u003cReact.Fragment\u003e\n        \u003cp\u003e{myLabel}\u003c/p\u003e\n        \u003cp\u003e{\"Component windowSize : \" + width + \"x\" + height}\u003c/p\u003e\n        \u003cp\u003e{\"Component Counter \" + count}\u003c/p\u003e\n        \u003cbutton onClick={() =\u003e setCount(c =\u003e c + 1)}\u003eComponent Counter\u003c/button\u003e\n      \u003c/React.Fragment\u003e\n    );\n  }\n}\n\n```\n\nuseWindowSize.js  (custom Hook example)\n```javascript\nimport { useState, useEffect } from \"react\";\n\nexport const useWindowSize = () =\u003e {\n  const [size, setSize] = useState({\n    width: window.innerWidth,\n    height: window.innerHeight\n  });\n\n  const handle = () =\u003e {\n    setSize({\n      width: window.innerWidth,\n      height: window.innerHeight\n    });\n  };\n\n  useEffect(() =\u003e {\n    window.addEventListener(\"resize\", handle);\n    return () =\u003e {\n      window.removeEventListener(\"resize\", handle);\n    };\n  }, []);\n\n  return size;\n};\n```\n\n## Why Universal Hooks?\n* use a customHook in your Component/Functional, without refactor. \n* useMemo \u0026 useCallback make PureComponents 100% pure! (max performance!)\n\n## Use Case : Make PureComponent 100% Pure\n```javascript\nimport { useCallback } from 'react';\n\nclass MyComponent extends React.PureComponent {\n  render (){\n    //....\n  }\n}\n\nclass Container extends React.PureComponent {\n  render (){\n    {this.props.arrayProp.map(el=\u003e\n      \u003cMyComponent key={el.id} onClick={useCallback( ()=\u003e someAction(el.id) , [el.id])} /\u003e \n    )}\n  }\n}\n```\n\n## Api Reference\nApi Reference are the same as official ones, so you can see api reference @ https://reactjs.org/docs/hooks-reference.html\n\u003cbr/\u003e\nCurrently supported api on Classes Component:\n\n* useState\n* useEffect\n* useLayoutEffect\n* useMemo\n* useCallback\n* useReducer\n* useRef\n* useContext\n* useImperativeHandle\n* useDebugValue\n\n## React Dev Tools\nindex.js\n```javascript\nimport { supportReactDevTools } from 'react-universal-hooks';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n\nsupportReactDevTools ({ active: process.env!==\"production\" });\n\n  ReactDOM.render(\n      \u003cApp /\u003e,\n    document.getElementById('root'),\n  );\n```\n\n![universal hooks devtools](https://user-images.githubusercontent.com/20126259/67915182-8663df80-fb92-11e9-9805-52789a6adaa8.PNG)\n\n\n## How it works under the hood ?\nhttps://github.com/salvoravida/react-class-hooks\n\n# Feedback\nLet me know what do you think about! \u003cbr\u003e\n*Do you like it? Give a star to this project!* :D\n\nContributors\n------------\nSee [Contributors](https://github.com/salvoravida/react-universal-hooks/graphs/contributors).\n\nLicense\n-------\n[MIT License](https://github.com/salvoravida/react-universal-hooks/blob/master/LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalvoravida%2Freact-universal-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsalvoravida%2Freact-universal-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalvoravida%2Freact-universal-hooks/lists"}