{"id":24719872,"url":"https://github.com/mikelpmc/my-hooks","last_synced_at":"2026-05-01T18:31:32.076Z","repository":{"id":39192905,"uuid":"247458452","full_name":"mikelpmc/my-hooks","owner":"mikelpmc","description":"Some react custom hooks made for fun","archived":false,"fork":false,"pushed_at":"2023-01-05T10:13:38.000Z","size":621,"stargazers_count":0,"open_issues_count":13,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-09T11:06:39.388Z","etag":null,"topics":["custom-hooks","hooks","javascript","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mikelpmc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-15T12:04:28.000Z","updated_at":"2021-05-28T14:00:06.000Z","dependencies_parsed_at":"2023-02-04T00:16:47.741Z","dependency_job_id":null,"html_url":"https://github.com/mikelpmc/my-hooks","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mikelpmc/my-hooks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikelpmc%2Fmy-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikelpmc%2Fmy-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikelpmc%2Fmy-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikelpmc%2Fmy-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mikelpmc","download_url":"https://codeload.github.com/mikelpmc/my-hooks/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikelpmc%2Fmy-hooks/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32508900,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"online","status_checked_at":"2026-05-01T02:00:05.856Z","response_time":64,"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":["custom-hooks","hooks","javascript","react"],"created_at":"2025-01-27T11:44:44.247Z","updated_at":"2026-05-01T18:31:32.053Z","avatar_url":"https://github.com/mikelpmc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## A collection of react custom hooks made for fun\n\n### useSyncState\n\n---\n\nThis hooks provides a persisted-synced state using localstorage and pub/sub pattern.\n\n#### Features\n\n💾 \u0026nbsp; Persist state to `localstorage`\n\n💻 \u0026nbsp; Syncs data between tabs/browser windows\n\n☁️ \u0026nbsp; Share state between same key hooks\n\nExample of use in a component:\n\n```js\nimport createSyncState from './useSyncState';\nconst useCounterState = createSyncState('counter', 0);\n\nconst Display = () =\u003e {\n    const [counter, setCounter] = useCounterState();\n\n    return (\n        \u003cdiv\u003e\n            \u003cp\u003eCounter: {counter}\u003c/p\u003e\n            \u003cbutton onClick={() =\u003e setCounter(current =\u003e current + 1)}\u003e\n                Increment\n            \u003c/button\u003e\n            \u003cbutton onClick={() =\u003e setCounter(current =\u003e current - 1)}\u003e\n                Decrement\n            \u003c/button\u003e\n        \u003c/div\u003e\n    );\n};\n\nexport default Display;\n```\n\n### useMatchMedia\n\n---\n\nThis hook will inform you when any given breakpoint is matched using the `window.matchMedia`.\n\nExample of use:\n\n```js\nimport useMatchMedia from './useMatchMedia';\n\nconst Display = () =\u003e {\n    const matched = useMatchMedia([368, 768]);\n\n    return \u003cdiv\u003eMatched breakpoint: {matched}\u003c/div\u003e;\n};\n```\n\n### useFieldValidator\n\nA hook to validate form input fields.\nIt already includes a couple of simple rules and you can also pass in custom ones.\n\nThe hook would \"listen\" to value changes so you would have to control the component as you would usually do with react.\n\nIt returns:\n\n-   isValid - boolean flag\n-   state - an object with the state of each validation rule\n-   registerField - a function to get the ref of the field\n\nExample of use:\n\n```js\nimport useFieldValidator, { RULES } from './useFieldValidator';\n\nconst customRule = value =\u003e value.length \u003e 8;\nconst rules = [RULES.isNotEmpty, RULES.isValidEmail, customRule];\n\nconst Display = () =\u003e {\n  const [email, setEmail] = useState('');\n  const {isValid, state, registerField} = useFieldValidator(rules);\n\n  return (\n    \u003cform\u003e\n      \u003cp\u003eState: {JSON.stringify(state, null, 4)}\u003c/p\u003e\n      \u003cp\u003eIsValid: {isValid}\u003c/p\u003e\n      \u003cinput type=\"email\" ref={registerField} value={email} onChange(ev =\u003e setEmail(ev.target.value)) /\u003e\n    \u003c/form\u003e\n  )\n}\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikelpmc%2Fmy-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmikelpmc%2Fmy-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikelpmc%2Fmy-hooks/lists"}