{"id":19677753,"url":"https://github.com/3rd-eden/references","last_synced_at":"2025-02-27T06:16:39.408Z","repository":{"id":66002007,"uuid":"187377037","full_name":"3rd-Eden/references","owner":"3rd-Eden","description":"Providing references to your React components from one single location","archived":false,"fork":false,"pushed_at":"2019-05-20T12:04:31.000Z","size":6,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-10T04:40:52.268Z","etag":null,"topics":["createref","forwardref","react","react-native","ref","references"],"latest_commit_sha":null,"homepage":null,"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/3rd-Eden.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-18T15:54:24.000Z","updated_at":"2019-05-20T12:04:32.000Z","dependencies_parsed_at":"2023-06-07T19:01:03.509Z","dependency_job_id":null,"html_url":"https://github.com/3rd-Eden/references","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3rd-Eden%2Freferences","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3rd-Eden%2Freferences/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3rd-Eden%2Freferences/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3rd-Eden%2Freferences/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/3rd-Eden","download_url":"https://codeload.github.com/3rd-Eden/references/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240987442,"owners_count":19889335,"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":["createref","forwardref","react","react-native","ref","references"],"created_at":"2024-11-11T17:35:17.135Z","updated_at":"2025-02-27T06:16:39.389Z","avatar_url":"https://github.com/3rd-Eden.png","language":"JavaScript","readme":"# references\n\n`references` is a replacement of the `React.createRef` method which (ab)uses\nthe same internal data structure to store all of the references in a single\nlocation. This allows for some pretty unique uses:\n\n- **testing** You can look-up any of the references that you created in the\n  component tree and perform assertions on them.\n- **complex components** It's not uncommon that you need to add more than one\n  reference to your render tree. You can now manage these from a single\n  location.\n\n## Installation\n\nThe `references` library is released in the public npm registry and can be\ninstalled by running:\n\n```\nnpm install --save references\n```\n\n## Usage\n\nThe library is designed to be a replacement of the `React.createRef` function\nthat ships in React, this is possible because it uses the same object\nstructure.\n\n```js\nconst refs = require('references');\n\nconst ref = refs();\nconsole.log(ref.current);\n```\n\n### create(name)\n\nCreate a new named reference. The name later be used to retrieve the ref\nusing the `get` method. The name argument is **required** and should be\nunique for the created `reference` instance.\n\n```js\nconst refs = require('references');\nconst ref = refs();\n\nconst label = ref.create('label');\n\n\u003cComponent ref={ label } /\u003e\n```\n\n### forward(name)\n\nIt returns an object that should be spread on the component. It will introduce\nthe following properties:\n\n- `ref` Created reference with the supplied name.\n- `references` Reference to the references instance, so you can chain them.\n\n```js\nconst refs = require('references');\nconst ref = refs();\n\nconst label = ref.forward('label');\n\u003cComponent { ...forward } /\u003e\n```\n\n### get(name)\n\nThe `get` method allows you to find the references that were created. It\naccepts a single argument, which is the name of the ref that was created.\nIt's possible that a ref was created from another reference, in that case\nyou can use the dot notation reference the created ref.\n\n```js\nconst refs = require('references');\n\nconst ref = refs();\nconst input = ref.create('input');    // This is what you pass to your components\nconst header = ref.create('header');  // using the `ref` property:\nconst label = header.create('label'); // \u003cExample ref={ ref.create('example') } /\u003e\n\nconsole.log(ref.get('input'));        // Points to the `input` ref\nconsole.log(ref.get('header'));       // Points to the `header` ref\nconsole.log(ref.get('label'));        // Returns null, as label was created as child of header\nconsole.log(ref.get('header.label')); // Points to the `label` ref\nconsole.log(header.get('label'));     // Points to the `label` ref\n```\n\n## Example\n\n```js\nimport React, { Component } from 'react';\nimport references from 'references';\n\nclass Example extends Component {\n  constructor() {\n    super(...arguments);\n\n    this.references = this.props.references || references();\n  }\n\n  render() {\n    const refs = this.references;\n\n    return (\n      \u003cContainer ref={ refs /* references() it self can also be used as ref */ }\u003e\n        \u003cHeader { ...refs.forward('header') }\u003e\n          \u003cSmol ref={ ref.create('smol') }\u003etiny text here\u003c/Smol\u003e\n        \u003c/Header\u003e\n      \u003c/Container\u003e\n    )\n  }\n}\n```\n\n```js\n\u003cExample /\u003e\n```\n\nThe `\u003cExample /\u003e` will now have the following references created:\n\n- `` (Just `ref.get()` without any arguments )\n- `header`\n- `header.title`\n- `smol`\n\n```js\nconst refs = references();\n\u003cExample {...refs.forward('foo') } /\u003e\n```\n\nThe `\u003cExample /\u003e` will now have the following references created:\n\n- `foo`\n- `foo.header`\n- `foo.header.title`\n- `foo.smol`\n\n## License\n\n[MIT](./LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F3rd-eden%2Freferences","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F3rd-eden%2Freferences","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F3rd-eden%2Freferences/lists"}