{"id":14384782,"url":"https://github.com/leo/react-refs","last_synced_at":"2025-08-23T18:30:50.153Z","repository":{"id":57343415,"uuid":"94466638","full_name":"leo/react-refs","owner":"leo","description":"Easily set references to React elements","archived":true,"fork":false,"pushed_at":"2017-11-08T21:42:24.000Z","size":9,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-08-06T04:11:16.726Z","etag":null,"topics":["react","reference","replacement","string-ref"],"latest_commit_sha":null,"homepage":"https://npmjs.com/react-refs","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/leo.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-15T18:14:43.000Z","updated_at":"2023-01-28T21:32:46.000Z","dependencies_parsed_at":"2022-09-12T07:00:17.776Z","dependency_job_id":null,"html_url":"https://github.com/leo/react-refs","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/leo%2Freact-refs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leo%2Freact-refs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leo%2Freact-refs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leo%2Freact-refs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leo","download_url":"https://codeload.github.com/leo/react-refs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":217384771,"owners_count":16168802,"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":["react","reference","replacement","string-ref"],"created_at":"2024-08-28T18:01:40.142Z","updated_at":"2024-08-28T18:05:25.899Z","avatar_url":"https://github.com/leo.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-refs\n\n---\n\n**DEPRECATED:** This is not a good idea in terms of performance. Bind in `constructor`... 😛\n\n---\n\nSince [string references](https://facebook.github.io/react/docs/refs-and-the-dom.html#legacy-api-string-refs) have been removed from [react](https://facebook.github.io/react/) for [multiple reasons](https://github.com/facebook/react/pull/8333#issuecomment-271648615), we as developers were forced to create a new function each time we set such a string reference for a [react](https://facebook.github.io/react/) element or component.\n\nTo avoid this and bring back the convenience of string references (even at the cost of a few minor problems, as mentioned above), I've built this library.\n\nDespite of all the things linked above, using this project is perfectly fine. Because either way, you should ensure to use string references [as less as possible](https://facebook.github.io/react/docs/refs-and-the-dom.html#dont-overuse-refs). But when you do, you'll probably built a logic like [this one](https://github.com/leo/react-refs/blob/master/index.js) by yourself (I usually do that), so this packagage simply abstracts this part in the best way.\n\n## Usage\n\nFirstly, install the package using [npm](https://www.npmjs.com):\n\n```bash\nnpm install --save react-refs\n```\n\nThen load it:\n\n```js\nimport setRef from 'react-refs'\n```\n\nNext, initialize the package in your `constructor`:\n\n```js\nconstructor(props) {\n  super(props)\n  this.setReference = setRef.bind(this)\n}\n```\n\nAs the final step, you can create a reference in `render` (using the example code mentioned below, your reference will live inside the `this.example` property):\n\n```jsx\n\u003cExample ref={this.setReference} name=\"example\"/\u003e\n```\n\n### Increasing Performance\n\nThe package is already binding in `constructor` to make re-rendering as fast as possible out of the box. But if you want to get the maximum out of performance, I suggest pre-filling each reference with `null` in `constructor` ([v8](https://developers.google.com/v8/) likes it a lot when you tell it as much as possible ahead of time):\n\n```js\nconstructor(props) {\n  super(props)\n  this.setReference = setRef.bind(this)\n  \n  // Based on the \"name\" property of the \u003cExample/\u003e component above\n  this.example = null\n}\n```\n\n## Caught a Bug?\n\n1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device\n2. Link the package to the global module directory: `npm link`\n3. Within the electron app of your choice, link it to the dependencies: `npm link react-refs`. Instead of the default one from [npm](https://www.npmjs.com), it will now use your local clone of the package!\n\n## Author\n\n- Leo Lamprecht ([@notquiteleo](https://twitter.com/notquiteleo))\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleo%2Freact-refs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleo%2Freact-refs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleo%2Freact-refs/lists"}