{"id":13450343,"url":"https://github.com/megazazik/react-context-refs","last_synced_at":"2025-05-06T21:23:50.229Z","repository":{"id":47464122,"uuid":"210688280","full_name":"megazazik/react-context-refs","owner":"megazazik","description":"Functions for getting refs of elements via context","archived":false,"fork":false,"pushed_at":"2024-08-14T15:08:49.000Z","size":241,"stargazers_count":21,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-18T02:38:36.847Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/megazazik.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-24T20:06:15.000Z","updated_at":"2024-09-09T21:37:19.000Z","dependencies_parsed_at":"2024-01-07T18:05:51.466Z","dependency_job_id":"6ec0e613-1b1f-4799-af02-c6ba2741ee7a","html_url":"https://github.com/megazazik/react-context-refs","commit_stats":{"total_commits":25,"total_committers":4,"mean_commits":6.25,"dds":"0.31999999999999995","last_synced_commit":"3d5b2912a008222c085ed60ce834689cb6aeaf83"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/megazazik%2Freact-context-refs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/megazazik%2Freact-context-refs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/megazazik%2Freact-context-refs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/megazazik%2Freact-context-refs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/megazazik","download_url":"https://codeload.github.com/megazazik/react-context-refs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252770262,"owners_count":21801517,"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":[],"created_at":"2024-07-31T07:00:33.780Z","updated_at":"2025-05-06T21:23:50.195Z","avatar_url":"https://github.com/megazazik.png","language":"TypeScript","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"# react-context-refs\n\n[![npm version](https://badge.fury.io/js/react-context-refs.svg)](https://badge.fury.io/js/react-context-refs)\n\nLibrary to get react refs via context. For example it can be useful when you need to scroll or set focus to some field after form validation and you have a deep nested components hierarchy.\n\n## Fields focus example\n\nFirst, you should add `RefProvider`.\n\nmain.js\n\n```jsx\nimport * as React from \"react\";\nimport { render } from \"ract-dom\";\nimport { RefProvider } from \"react-context-refs\";\nimport Page from \"./form\";\n\n// ...\n\nrender(\n  \u003cRefProvider\u003e\n    \u003cPage /\u003e\n  \u003c/RefProvider\u003e,\n  element\n);\n```\n\nThen you need to add each field to context refs storage. You can add some metadata to your refs. In this example we add `hasError` property to refs.\n\nsomeField.js\n\n```jsx\nimport * as React from \"react\";\nimport { useContextRef } from \"react-context-refs\";\n\nexport default ({ value, onChange, hasError }) =\u003e {\n  const setRef = useContextRef({ hasError });\n\n  return (\n    \u003cinput\n      style={hasError ? { backgroundColor: \"#FFCABF\" } : {}}\n      ref={setRef}\n      value={value}\n      onChange={onChange}\n    /\u003e\n  );\n};\n```\n\nAnd then in some root component you can get all refs and set focus to any of them.\n\n```jsx\nimport * as React from \"react\";\nimport { useRefs } from \"react-context-refs\";\nimport { compareOrder } from \"sort-nodes\";\n\n// ...\n\nexport default props =\u003e {\n  // ...\n\n  const refs = useRefs();\n  const onSubmit = () =\u003e {\n    if (!isFormValid()) {\n      const firstFieldWithError = refs\n        // remove fields without errors\n        .filter(ref =\u003e ref.meta.hasError)\n        // get current value of refs\n        .map(ref =\u003e ref.current)\n        // sort by order in dom tree\n        .sort(compareOrder)[0];\n\n      firstFieldWithError.focus();\n      return;\n    }\n    // ...\n  };\n\n  return \u003cForm {...formProps} onSubmit={onSubmit} /\u003e;\n};\n```\n\n## API\n\n### RefProvider\n\nThis provider creates a storage of refs and let you use other methods of `react-context-refs`.\n\nA storage contains an array of refs and two additional fields for each ref: `type` and `meta`.\n\n### useRefs\n\n`useRefs` returns an array of refs from the storage. Each ref has the following fields:\n\n- _current_ - value of ref\n- _type_ - string to determine type of ref if there are several types of ref in the storage\n- _meta_ - any additional data\n\nYou can use `useRefs` without parameters or you can pass a string to `useRefs` and it will return only refs of the corresponding type.\n\n```js\nimport { useRefs } from \"react-context-refs\";\n\n// ...\nconst myInputs = useRefs(\"my-input\");\n```\n\n### useContextRef\n\nThis hook returns a method to set ref.\n\nYou add pass a metadata to ref or a metadata and type.\n\nThe first form of `useContextRef` has the only parameter - `meta`.\n\nThe second has two parameters:\n\n- `type` _string_\n- `meta` _any_\n\n```js\nimport { useContextRef } from \"react-context-refs\";\n\n// ...\nconst setRef = useContextRef(\"my-ref-type\", { additionalValue: true });\n```\n\n### Typings (typescript)\n\nIf you want to add strong types to your refs you can set type of `current` and `meta` for each `type`.\n\nYou can do it with this code:\n\n```ts\ndeclare module ReactContextRefs {\n  export interface Refs {\n    myInput: { current: HTMLInputElement; meta: { hasError: boolean } };\n  }\n}\n```\n\nHere we has set types of `current` and `meta` for each ref which has type `myInput`.\n\n```ts\nimport { useRefs } from \"react-context-refs\";\n\n// now myInputs has type an array of\n// {\n// \ttype: \"myInput\",\n// \tcurrent: HTMLInputElement,\n// \tmeta: {hasError: boolean},\n// }\nconst myInputs = useRefs(\"myInput\");\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmegazazik%2Freact-context-refs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmegazazik%2Freact-context-refs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmegazazik%2Freact-context-refs/lists"}