{"id":20340179,"url":"https://github.com/webengage/react-value-link","last_synced_at":"2026-03-05T20:40:50.001Z","repository":{"id":57347336,"uuid":"46875956","full_name":"WebEngage/react-value-link","owner":"WebEngage","description":"An alternative to React's LinkedStateMixin","archived":false,"fork":false,"pushed_at":"2016-06-23T11:50:51.000Z","size":8,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-02-15T14:18:01.030Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":false,"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/WebEngage.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-11-25T17:15:07.000Z","updated_at":"2016-09-27T17:04:12.000Z","dependencies_parsed_at":"2022-08-28T04:00:28.162Z","dependency_job_id":null,"html_url":"https://github.com/WebEngage/react-value-link","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/WebEngage%2Freact-value-link","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebEngage%2Freact-value-link/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebEngage%2Freact-value-link/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebEngage%2Freact-value-link/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WebEngage","download_url":"https://codeload.github.com/WebEngage/react-value-link/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241867649,"owners_count":20033815,"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-11-14T21:20:06.567Z","updated_at":"2026-03-05T20:40:44.965Z","avatar_url":"https://github.com/WebEngage.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# ValueLink\nAn alternative to React's [LinkedStateMixin](https://www.npmjs.com/package/react-addons-linked-state-mixin) for [two way data bindings](https://facebook.github.io/react/docs/two-way-binding-helpers.html)\n\n\n### Advantages over LinkedStateMix\n- Support for binding any data object and not necessarily the component's state\n- Deep path based data bindings\n- Not a mixin so it just works with ES6 style React\n\n\n### Use it\nInstall with npm\n```\nnpm install --save react-value-link\n```\n...then require it (assumes a [frontend module bundler](http://www.slant.co/topics/3900/~frontend-javascript-module-bundlers))\n```js\nvar ValueLink = require('react-value-link');\n```\n\nOr directly include on the page\n```html\n\u003cscript type=\"text/javascript\" src=\"react-value-link.js\"\u003e\u003c/script\u003e\n```\n\n### API\n#### ValueLink(data, onDataChange)\nReturns a **link** associated to `data`\n\n###### Arguments\n`data` - object whose constituent values will be binded to `\u003cinput\u003e` elements  \n`onDataChange` - callback called when `\u003cinput\u003e` values change or when `requestChange()` is called explicity. It receives the changed `data` as first argument. \n`onDataChange` is where you would usually update the store, trigger an action or mutate the component's state\n\n#### link\nA [functor](https://en.wikipedia.org/wiki/Function_object#In_JavaScript) used to create bindings or futher nested links. \nEvery link has an associated path. The link returned by `ValueLink` has an empty path and directly points to `data`\n\nA link is like `ReactLink` and similarly can be passed in the `valueLink` prop to React `\u003cinput\u003e` elements to \"bind\" them with `data` at the associated path \n```jsx\n\u003cinput ... valueLink={link} /\u003e\n```\n\n#### link(p1, [p2, [p3, [...]]])\nExtends the path from `link` with `p1`, `p2`, `p3`, `...` in that order and returns another link based of the extended path\n\n###### Arguments\n`p1`, `p2`, `p3`, `...` - string or integer property names \n\nThis is used to create nested links\n```js\ncontactLink = link('contact');\n...\nnameLink    = contactLink('name');\n```\n\n#### link.value\nIs the value within `data` at **this** link's path or `null` if there are missing objects in the path\n\n#### link.requestChange(newValue)\nSets `newValue` at **this** link's path within `data` and calls `onDataChange`. \nAny missing objects in the path are automatically created if necessary\n\n#### link.onChange\nSince React 15 deprecated ReactLink, `\u003cinput\u003e` components no longer support the `valueLink` prop. You can still use this library with React 15 by passing the value and onChange props seperately  \n\n```jsx\n\u003cinput ... value={link.value} onChange={link.onChange} /\u003e\n```\n\n#### link.handleChange\nA hook to intercept a `requestChange` call on **this** link. This is good for validating, transforming or invoking a related action.\n\n`link.handleChange` must be assigned a function accepting two arguments.\n```js\nlink.handleChange = function(newValue, change) {\n    ...\n\n    change(newValue);\n};\n```\n\n###### Arguments\n`newValue` - value passed to `requestChange()`  \n`change` - a function to set `newValue` or any other substitute in `data` and then invoke the `onDataChange` callback. You may decide to not call `change` at all in which case no changes are made to `data` and `onDataChange` is not invoked.\n\n\n### Example\n\n```js\nvar Hello = React.createClass({\n   // unlike LinkedStateMixin, ValueLink is not a mixin\n   getInitialState: function() {\n       return { \n           values: {\n             list: [\n               { type: \"translateX\", x: 10 },\n               { type: \"scaleX\", x: 1.2 }\n             ]\n           }\n         };\n   },\n   render: function() {\n       var that = this;\n\n       var link = ValueLink(this.state.values, function(values) { that.setState({values: values}) } );\n\n       // a partial valueLink binding which can be sent (as props) to child components that understand only a sub portion of the data structure\n       var partial = link('list');\n     \n       return (\n         \u003cdiv\u003e\n           {\n             this.state.values.list.map(function(item, i) {\n               return (\n                 \u003cdiv\u003e\n                   \u003cinput valueLink={partial(i)('type')} /\u003e\n                   \u003cinput valueLink={link('list', i, 'x')} /\u003e\n                 \u003c/div\u003e\n               );\n             })\n           }\n           \u003cpre\u003e{JSON.stringify(this.state)}\u003c/pre\u003e\n         \u003c/div\u003e\n       );\n   }\n});\n\nReact.render(\u003cHello name=\"World\" /\u003e, document.body);\n```\n\n#### License - [WTFPL](http://www.wtfpl.net/)\n```\n            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE\n                    Version 2, December 2004\n\n Copyright (C) 2015 WebEngage \u003cgeeks {at} webengage.com\u003e\n\n Everyone is permitted to copy and distribute verbatim or modified\n copies of this license document, and changing it is allowed as long\n as the name is changed.\n\n            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE\n   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION\n\n  0. You just DO WHAT THE FUCK YOU WANT TO.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebengage%2Freact-value-link","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebengage%2Freact-value-link","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebengage%2Freact-value-link/lists"}