{"id":17966247,"url":"https://github.com/volijs/nestedlink","last_synced_at":"2025-04-08T09:08:03.617Z","repository":{"id":3699281,"uuid":"50621986","full_name":"VoliJS/NestedLink","owner":"VoliJS","description":"Callback-free React forms with painless validation.","archived":false,"fork":false,"pushed_at":"2024-10-17T18:36:15.000Z","size":18987,"stargazers_count":194,"open_issues_count":52,"forks_count":25,"subscribers_count":15,"default_branch":"master","last_synced_at":"2024-10-29T14:23:58.054Z","etag":null,"topics":["data-binding","forms","javascript","react","react-links","typescript"],"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/VoliJS.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":"2016-01-28T23:36:09.000Z","updated_at":"2024-02-08T19:49:55.000Z","dependencies_parsed_at":"2024-11-20T22:36:17.721Z","dependency_job_id":null,"html_url":"https://github.com/VoliJS/NestedLink","commit_stats":{"total_commits":201,"total_committers":8,"mean_commits":25.125,"dds":0.06467661691542292,"last_synced_commit":"a2ae9ea4990ebab154131f7457255fe7b835511f"},"previous_names":["volicon/valuelink"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VoliJS%2FNestedLink","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VoliJS%2FNestedLink/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VoliJS%2FNestedLink/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VoliJS%2FNestedLink/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VoliJS","download_url":"https://codeload.github.com/VoliJS/NestedLink/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247809962,"owners_count":20999816,"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":["data-binding","forms","javascript","react","react-links","typescript"],"created_at":"2024-10-29T13:08:37.977Z","updated_at":"2025-04-08T09:08:03.581Z","avatar_url":"https://github.com/VoliJS.png","language":"TypeScript","readme":"![logo](/images/value-link-logo.png)\n\n# Painless React forms, validation, and state management\n\nNestedLink is `useState` React Hook on steroids providing an elegant callback-free solution for complex forms with input validation and making the React state a perfect state container. It's lightweight (6.5K minified) and designed to be used with both JS and TypeScript.\n\nThe `Link` is the object representing the writable reference to the member of the component's state encapsulating the value, function to update the value, and the validation error. `Link` class has a set of methods to perform useful transformations, such as `$link.props` generating the pair of standard `{ value, onChange }` props.\n\n`NestedLink` dramatically improves your React project's modularity and code readability.\n\n```javascript\nimport { useLink } from 'valuelink'\nimport { MyInput } from './controls.jsx'\n\nconst coolState = { some : { name : '' } };\nconst MyCoolComponent = () =\u003e {\n    // Digging through the object to get a link to the `coolState.some.name`\n    const $name = useLink( coolState ).at( 'some' ).at( 'name' )\n    \n    // applying the validation rules\n    $name.check( x =\u003e x.length \u003e 0, 'Name is required' ),\n         .check( x =\u003e x.length \u003e 2, 'Name is too short' );\n         .check( x =\u003e x.length \u003c 20, 'Name is too long' );\n\n    return (\n        \u003cMyInput $value={$name} /\u003e\n    )\n}\n\n// controls.jsx\nimport * as React from 'react'\n\n// Custom form field with validation taking the link to the `value`\nconst MyInput = ({ $value }) =\u003e (\n    \u003cdiv\u003e\n        \u003cinput {...$value.props} className={ $value.error ? 'error' : '' } /\u003e\n        \u003cspan\u003e{ $value.error || '' }\u003c/span\u003e\n    \u003c/div\u003e\n)\n```\n\n## Features\n\n***IMPORTANT! Version 2.x is not entirely backwards compatible with 1.x, see the release notes at the bottom.***\n\n- Callback-free form controls binding to the component state.\n- Complete separation of the validation logic from the markup.\n- Easy handling of nested objects and arrays in the component state.\n- Complete support for the React Hooks API and functional components.\n- Pricise TypeScript typings.\n\nReference implementation of 'linked' UI controls (optional `linked-controls` npm package):\n\n- Standard tags: `\u003cInput /\u003e`, `\u003cTextArea /\u003e`, `\u003cSelect /\u003e`,\n- Custom tags: `\u003cRadio /\u003e`, `\u003cCheckbox /\u003e`, `\u003cNumberInput /\u003e`\n- Validator functions: `isNumber`, `isEmail`, `isRequred`.\n\n## Tutorials\n\nThe rationale behind the design and a high-level overview of how amazing NestedLink is: [React Hooks, form validation, and complex state](https://itnext.io/react-hooks-and-two-way-data-binding-dd4210f0ed94)\n\nThe series of 5-minute tutorials (with `React.Component`):\n\n- [The basics of ValueLink design pattern](https://medium.com/@gaperton/managing-state-and-forms-with-react-part-1-12eacb647112#.j7sqgkj88)\n- [Form validation with ValueLinks](https://medium.com/@gaperton/react-forms-with-value-links-part-2-validation-9d1ba78f8e49#.nllbm4cr7)\n- [Complex state with ValueLinks](https://medium.com/@gaperton/state-and-forms-in-react-part-3-handling-the-complex-state-acf369244d37#.x0fjcxljo)\n\n### [API Reference](/valuelink/API.md)\n\n### [Linked Controls Reference](/linked-controls/README.md)\n\n### [Examples](https://volijs.github.io/NestedLink)([sources](/examples/))\n\n## How to\n\n### Use it in your project\n\nThere are no side dependencies except `react` as peer dependency. Installation:\n\n`npm install valuelink --save-dev`\n\nUsage with React Hooks (check out the [React Hooks starting boilerplate](/examples/babel-starter)).\n\n```javascript\nimport React from 'react'\nimport { useLink } from 'valuelink'\n...\n// Instead of const [ name, setName ] = useState('')\nconst $name = useLink('');\n```\n\nUsage with React Component.\n\n```javascript\nimport React from 'react'\n// Instead of React.Component...\nimport { LinkedComponent } from 'valuelink'\n...\n// In a render, do\nconst $name = this.$at('name');\n// Or, to link all the state members at once...\nconst state$ = this.state$();\n```\n\nRefer to the [databinding examples](/examples/databinding) and the [manual](/linked-controls/README.md) for the typical data binding scenarios.\n\n### Create your own data bound controls\n\nUse [linked-controls](/linked-controls) project as the starting boilerplate for your components.\n\n### Create the binding to the custom state container\n\nNestedLink is an abstraction of the data binding independent on both the particular control and the state container. The [default binding](/valuelink/src/component.ts) implemented\nin the library is for the standard React state. It's fairly easy to create your own.\n\nYou need to subclass React.Component and make your own `$at` and `state$` methods.\nYou can either use `Link.value` inside to create links dynamically, or extend the `Link` as it's done in [/valuelink/src/component.ts](/valuelink/src/component.ts).\n\n### Start hacking\n\n![design](/images/valuelinks.jpg)\n\nIt's a very simple library written with TypeScript, there's no any magic inside (except some scary type annotations). If you want to play with the examples, fix the bug, or whatever:\n\n`yarn` - installs the dependencies.\n\n`yarn build` - compiles everything including examples.\n\n## Release Notes\n### 2.0\n\n- IMPORTANT: Repository is converted to the monorepository based on yarn worspaces.\n- IMPORTANT: `valuelink/tags.jsx` is moved to the dedicated package `linked-controls`.\n- Complete support of new React Hooks API.\n    - `useLink()` to create the state link.\n    - `useIO()` to perform promised IO on mount.\n    - `useLocalStorage()` to persist links to the local storage (loaded on mount, saved on unmount).\n- $-notation for the link variables.\n- New React.Component API (`this.linkAt -\u003e this.$at`, `this.linkAll` -\u003e `this.state$`)\n- Group operations `Link.getValues()`, `Link.setValues()`, `Link.getErrors()`\n\n### v1.6\n\nReact Hooks support.\n\n- `useLink( initValue )` - create linked state.\n- `setLinks({ lnk1, lnk2, ... }, json )` - bulk set link values from an object.\n- `linksValues({ lnk1, lnk2, ... })` - extract values object from links.\n- `linksErrors({ lnk1, lnk2, ... })` - extract errors object from links.\n\n### v1.5\n\n- `\u003cinput {...link.props} /\u003e` can be used to bind the link to any of the standard controls expecting `value` and `onChange` props.\n\n---\n![usedby](/images/usedby.png)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvolijs%2Fnestedlink","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvolijs%2Fnestedlink","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvolijs%2Fnestedlink/lists"}