{"id":16978693,"url":"https://github.com/srph/react-link-state","last_synced_at":"2025-03-22T14:31:57.042Z","repository":{"id":57333964,"uuid":"44425614","full_name":"srph/react-link-state","owner":"srph","description":"A helper util to use LinkedStateMixin for ES6 React Components","archived":false,"fork":false,"pushed_at":"2017-08-15T14:23:32.000Z","size":14,"stargazers_count":23,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T12:04:21.243Z","etag":null,"topics":["linkedstatemixin","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/srph.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":"2015-10-17T05:43:50.000Z","updated_at":"2021-09-10T18:20:35.000Z","dependencies_parsed_at":"2022-08-29T13:11:36.866Z","dependency_job_id":null,"html_url":"https://github.com/srph/react-link-state","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srph%2Freact-link-state","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srph%2Freact-link-state/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srph%2Freact-link-state/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srph%2Freact-link-state/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/srph","download_url":"https://codeload.github.com/srph/react-link-state/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244972361,"owners_count":20540965,"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":["linkedstatemixin","react"],"created_at":"2024-10-14T01:44:01.540Z","updated_at":"2025-03-22T14:31:56.774Z","avatar_url":"https://github.com/srph.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## react-link-state [![npm version](http://img.shields.io/npm/v/react-link-state.svg?style=flat-square)](https://npmjs.org/package/react-link-state?style=flat-square) [![Build Status](https://img.shields.io/travis/srph/react-link-state.svg?style=flat-square)](https://travis-ci.org/srph/react-link-state?branch=master)\nA helper function to use LinkedStateMixin for ES6 React Components.\n\n## Removal of `valueLink`\n`valueLink` has been removed from React starting on `v16`. Still, this projects works just fine for older versions.\n\nIf you'd like to future-proof your application, check out [@developit](https://github.com/developit)'s [`linkstate`](https://github.com/developit/linkstate).\n\n## Installing\n```bash\nnpm install react-link-state --save\n```\n\n## Usage\n```es6\nimport React from 'react';\nimport linkState from 'react-link-state';\n\nexport default MyForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      username: '',\n      password: '',\n      toggle: false\n    };\n  }\n\n  render() {\n    console.log(this.state);\n    \n    return (\n      \u003cform\u003e\n        \u003cinput type=\"text\" valueLink={linkState(this, 'username')} /\u003e\n        \u003cinput type=\"password\" valueLink={linkState(this, 'password')} /\u003e\n        \u003cinput type=\"checkbox\" checkedLink={linkState(this, 'toggle')} /\u003e\n      \u003c/form\u003e\n    );\n  }\n}\n```\n\n**Note**: Use [`checkedLink`](https://facebook.github.io/react/docs/two-way-binding-helpers.html) for checkboxes.\n\nDeep link-state is also supported!\n\n```es6\n// Given that we have this state:\n// {\n//   users: [{\n//     profile: {\n//       first_name: ''\n//     }\n//   }]\n// }\n\u003cinput type=\"text\" valueLink={linkState(this, 'users.0.profile.first_name')} /\u003e\n```\n\n## Testing\n```\nnpm test\n```\n\nYou need node `v4.0.0` to runs the tests. See [issue](http://facebook.github.io/react/docs/test-utils.html#renderintodocument).\n\n\u003e You will need to have window, window.document and window.document.createElement globally available before you import React. Otherwise React will think it can't access the DOM and methods like setState won't work.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrph%2Freact-link-state","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsrph%2Freact-link-state","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrph%2Freact-link-state/lists"}