{"id":17353714,"url":"https://github.com/salvoravida/react-class-hooks","last_synced_at":"2025-09-05T03:43:37.871Z","repository":{"id":33211915,"uuid":"155115241","full_name":"salvoravida/react-class-hooks","owner":"salvoravida","description":"React Hooks implementation for Class Components. Support React \u003e= 15.3.2","archived":false,"fork":false,"pushed_at":"2023-01-06T02:06:14.000Z","size":523,"stargazers_count":66,"open_issues_count":4,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-09T14:20:40.054Z","etag":null,"topics":["abramov","custom-hook","didmount","didupdate","hooks","named-hooks","react","react-class","react-class-hooks","react-hooks","react-use","react-use-class","supports-react","unmount"],"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":"2018-10-28T21:01:33.000Z","updated_at":"2025-01-18T06:40:03.000Z","dependencies_parsed_at":"2023-01-14T23:55:58.294Z","dependency_job_id":null,"html_url":"https://github.com/salvoravida/react-class-hooks","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/salvoravida/react-class-hooks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salvoravida%2Freact-class-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salvoravida%2Freact-class-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salvoravida%2Freact-class-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salvoravida%2Freact-class-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/salvoravida","download_url":"https://codeload.github.com/salvoravida/react-class-hooks/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salvoravida%2Freact-class-hooks/sbom","scorecard":{"id":796838,"data":{"date":"2025-08-11","repo":{"name":"github.com/salvoravida/react-class-hooks","commit":"feb39203903ce072110e81ba0847dd046f2f73e1"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Code-Review","score":0,"reason":"Found 1/19 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 12 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"15 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-23T09:14:53.864Z","repository_id":33211915,"created_at":"2025-08-23T09:14:53.864Z","updated_at":"2025-08-23T09:14:53.864Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273709021,"owners_count":25153729,"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-09-05T02:00:09.113Z","response_time":402,"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":["abramov","custom-hook","didmount","didupdate","hooks","named-hooks","react","react-class","react-class-hooks","react-hooks","react-use","react-use-class","supports-react","unmount"],"created_at":"2024-10-15T17:17:47.755Z","updated_at":"2025-09-05T03:43:32.861Z","avatar_url":"https://github.com/salvoravida.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# react-universal-hooks\n\u003cp align=\"center\"\u003e\u003cb\u003eUPDATE 2019.03.04 -\u003e Recommended way to use Class Hooks\u003c/b\u003e\u003c/p\u003e\nhttps://github.com/salvoravida/react-universal-hooks\n\n# react-class-hooks [![npm version](https://img.shields.io/npm/v/react-class-hooks.svg?style=flat)](https://www.npmjs.org/package/react-class-hooks) \n\nReact Hooks implementation for Class Components. Support React \u003e= 15.3.2\n\nInstallation\n-----------\nUsing [npm](https://www.npmjs.com/):\n\n    $ npm install --save react-class-hooks\n\nOr [yarn](https://yarnpkg.com/):\n\n    $ yarn add react-class-hooks\n\nReact 15.3.2 - 15.6.2 polyfill needed\n----\nFor React Versions 15.3.2 to 15.6.2 you have to import `react-class-hooks/poly15` in your root index.js\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport 'react-class-hooks/poly15';\nimport App from './App';\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('root'));\n```\nUsage\n-----    \n```javascript\nimport { useClassState, useClassCallback, useClassEffect } from 'react-class-hooks';\nimport { useClassWindowSize  } from \"./hooks\";\n\nclass MyComponent 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    \n    render() {\n    const { width, height } = useClassWindowSize();\n\n    return (\n        \u003cdiv\u003e\n          \u003cp\u003e windowSize : {width} x {height}\u003c/p\u003e\n          {/** ..... **/}\n        \u003c/div\u003e\n    );\n    }\n}\n```\n\nhooks.js\n```javascript\nimport { useClassState, useClassEffect } from 'react-class-hooks';\n\nexport const useClassWindowSize = () =\u003e {\n    const [size, setSize] = useClassState({\n        width: window.innerWidth,\n        height: window.innerHeight,\n    });\n    const handle = (() =\u003e {\n        setSize({\n            width: window.innerWidth,\n            height: window.innerHeight,\n        });\n    });\n    useClassEffect(() =\u003e {\n        window.addEventListener('resize', handle);\n        return () =\u003e {\n            window.removeEventListener('resize', handle);\n        };\n    }, []);\n    return size;\n};\n```\n\n\n## Abstract\nReact Hooks implementation for Class Components. Support React \u003e= 15.3.2\n\n## What are React Hooks ?\nOfficial Intro -\u003e https://reactjs.org/docs/hooks-intro.html\n\nIn poor words, with use******** you are injecting @ runtime during render phase a\n*piece of {state, didMount, didUpdate, unMount}* just in one line of code,\n\u003cstrong\u003e*without collision with eventually already existing state \u0026 lifecycle of your components.*\u003c/strong\u003e\u003cbr/\u003e\nYou can think Hooks like Mixin without Mixin drawbacks, because of Runtime Injection\u0026Isolation.\n\n## Why Hooks?\nShare Business Logic (*piece of [state, didMount, didUpdate, unMount]*) between components in one line of code.\u003cbr/\u003e\nDoes it have a performance cost? Of course, injecting @ runtime have always a cost. So Why?\u003cbr/\u003e\n\u003cstrong\u003eShare Business Logic (*piece of [state, didMount, didUpdate, unMount]*) beetween components in one line of code.\u003c/strong\u003e\n\n## Why Hooks for Class Components?\n* Why not? (of course the useClassState used alone does not make sense in Class Comp. The real advantage is partial state isolation in Custom Hooks) \n* In future you could have custom Hooks for functional components, but you want to use it in a complex Class Container for any reason.\n* You can play with hooks today in already existing apps, testing them in class components. `react-class-hooks` should be fine with React \u003e= 15.3.2\n* useClassMemo \u0026 useClassCallback make PureComponents 100% pure! (max performance!)\n* You could use Advanded Class Hooks concepts (see below)\n\n## Use Case : Make PureComponent 100% Pure\n```javascript\nimport { useClassCallback } from 'react-class-hooks';\n\n//named stack hooks -\u003e see below (isolated named stack - no order rules drawbacks)\nconst myComponentCallback = useClassCallback.createStack('myComponentCallback');\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={myComponentCallback( ()=\u003e someAction(el.id) , [el.id])} /\u003e \n    )}\n  }\n}\n```\n\n## Does `react-class-hooks` use under the hood React official hooks?\nNo. It implement useClass*** without React use****. It should supports React \u003e=15.3.2\u003cbr/\u003e\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:\n\n* useClassState -\u003e create \u0026 use a partial isolated Component State.\n* useClassEffect -\u003e inject code on didMount+didUpdate+didUnmount\n* useClassMemo -\u003e memoize values \n* useClassCallback -\u003e memoize dynamic callbacks -\u003e useful on PureComponent when rendering Arrays.\n* useClassReducer -\u003e a Redux-like local state\n* useClassRef -\u003e a mutable ref object with .current \n* useClassContext -\u003e use Context\n* useClassLayoutEffect -\u003e alias for useClassEffect\n* useClassImperativeHandle -\u003e just for compatibility with useImperativeHandle. \n\n## Advanded Class Hooks : Named Hooks\nHooks are anonymous, so order matters in the \"render\" method, because there is no other way to differentiate from one call to another in the same render.\nBut you could need one inside a condition, or you want to share state beetween 2 subRenders in the same render phase.\n\nlet's see an example : \n```javascript\nconst useMyLoggerState = useClassState.create(\"MyLogger\");\nconst useMyLoggerEffect = useClassEffect.create(\"MyLogger\");\n\nclass App extends React.PureComponent {\n  renderLogger() {\n    const [logger, setLogger] = useMyLoggerState(0);\n    return (\n      \u003c\u003e\n        \u003cp\u003eHidden LOGGER COUNTER {logger}\u003c/p\u003e\n        \u003cbutton onClick={() =\u003e setLogger(logger + 1)}\u003e\n          Add Hidden LoggerCounter\n        \u003c/button\u003e\n      \u003c/\u003e\n    );\n  }\n\n  render() {\n    const [count, setCount] = useClassState(0);\n    const { width, height } = useClassWindowSize();\n\n    if (count % 5 === 0) {\n      const [logger] = useMyLoggerState(0);\n      useMyLoggerEffect(() =\u003e {\n        document.title = \"logged times \" + logger;\n      });\n    }\n\n    const [count2, setCount2] = useClassState(0);\n\n    return (\n          \u003cdiv\u003e\n            \u003cp\u003e\n              windowSize : {width}x{height}\n            \u003c/p\u003e\n            \u003cp\u003eAnonymous Counter 1 {count}\u003c/p\u003e\n            \u003cbutton onClick={() =\u003e setCount(count + 1)}\u003eAdd Counter 1\u003c/button\u003e\n            {count % 5 === 0 \u0026\u0026 this.renderLogger()}\n            \u003cp\u003eOther Anonymous Counter {count2}\u003c/p\u003e\n            \u003cbutton onClick={() =\u003e setCount2(count2 + 1)}\u003eAdd Other Counter\u003c/button\u003e\n          \u003c/div\u003e\n        );\n    }\n}\n```\nhttps://codesandbox.io/s/v8y8o3m737\n\nI know that hooks should not be inside a condition, because it breaks the order rule, but a Named Hooks \ndoes not break anonymous hooks stack, as it has a isolated named own state.\nNote that named hooks share context so calling 2 times the same Named Hook in the same render phase,\nwill get the same value! \n```javascript\n   render () {\n   \n   const [logger, setLogger] = useMyLoggerState({});\n   \n   const [logger2, setLogger2] = useMyLoggerState({});\n   \n   // =\u003e logger2===logger !!\n      \n   }\n```\nMay it be useful or not? In many cases custom hooks are based on one call only of useState and useEffect!\nIn such case using Named Hooks is better because the created *namedCustomHooks* does not need hook order rule!\n\nlet's see a useClassWindowSize with named hooks:\n```javascript\nimport { useClassState, useClassEffect } from 'react-class-hooks';\n\nconst useClassWsState= useClassState.create(\"WindowSize\");\nconst useClassWsEffect= useClassEffect.create(\"WindowSize\");\n\nconst useClassWindowSize = () =\u003e {\n    const [size, setSize] = useClassWsState({\n        width: window.innerWidth,\n        height: window.innerHeight,\n    });\n    const handle = (() =\u003e {\n        setSize({\n            width: window.innerWidth,\n            height: window.innerHeight,\n        });\n    });\n    \n    useClassWsEffect(() =\u003e {\n        window.addEventListener('resize', handle);\n        return () =\u003e {\n            window.removeEventListener('resize', handle);\n        };\n    }, []);\n    return size;\n}; \n```\nMoreover debugging is easier with Named Hooks :\n\u003cp align=\"center\"\u003e\n    \u003cimg alt=\"react-adal\" src=\"https://i.postimg.cc/sXFWT77F/app.png\"\u003e\n\u003c/p\u003e\nSymbol(WindowSize) is more clear than Symbol(States-0) and if you have more custom hooks used in a component,\nyou have to check the order in the source ...\n\n## Advanded Class Hooks : Named Stack Hooks\nIf you need an ordered list of Named Hooks you could find useful the last advanced api concept.\n```javascript\nconst useMyLoggerStateStack = useClassState.createStack(\"MyLoggerStack\");\n\nclass App extends React.PureComponent {\n   render () {\n   \n   const [logger, setLogger] = useMyLoggerStateStack({});\n   //....\n   const [logger2, setLogger2] = useMyLoggerStateStack({});\n   \n   // =\u003e logger2 !== logger !!\n      \n   }\n}   \n```\n\n## How can i create Universal Custom Hooks in future?\nhttps://github.com/salvoravida/react-universal-hooks\n\n# Feedback\n\nLet me know what do you think about! \u003cbr\u003e\n*Enjoy it? Star this project!* :D\n\n# Todo\n* didCatch support\n* tests\n* others api\n* more custom hooks examples\n* better docs\n\nany idea? let me know and contribute!\n\nContributors\n------------\nSee [Contributors](https://github.com/salvoravida/react-class-hooks/graphs/contributors).\n\nLicense\n-------\n[MIT License](https://github.com/salvoravida/react-class-hooks/blob/master/LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalvoravida%2Freact-class-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsalvoravida%2Freact-class-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalvoravida%2Freact-class-hooks/lists"}