Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@linked/react
Advanced tools
Readme
NestedLink 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.
The 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.
NestedLink
dramatically improves your React project's modularity and code readability.
import { useLink } from '@linked/react'
import { MyInput } from './controls.jsx'
const coolState = { some : { name : '' } };
const MyCoolComponent = () => {
// Digging through the object to get a link to the `coolState.some.name`
const $name = useLink( coolState ).at( 'some' ).at( 'name' )
// applying the validation rules
$name.check( x => x.length > 0, 'Name is required' ),
.check( x => x.length > 2, 'Name is too short' );
.check( x => x.length < 20, 'Name is too long' );
return (
<MyInput $value={$name} />
)
}
// controls.jsx
import * as React from 'react'
// Custom form field with validation taking the link to the `value`
const MyInput = ({ $value }) => (
<div>
<input {...$value.props} className={ $value.error ? 'error' : '' } />
<span>{ $value.error || '' }</span>
</div>
)
IMPORTANT! Version 2.x is not entirely backwards compatible with 1.x, see the release notes at the bottom.
Reference implementation of 'linked' UI controls (optional linked-controls
npm package):
<Input />
, <TextArea />
, <Select />
,<Radio />
, <Checkbox />
, <NumberInput />
isNumber
, isEmail
, isRequred
.The rationale behind the design and a high-level overview of how amazing NestedLink is: React Hooks, form validation, and complex state
The series of 5-minute tutorials (with React.Component
):
There are no side dependencies except react
as peer dependency. Installation:
npm install valuelink --save-dev
Usage with React Hooks (check out the React Hooks starting boilerplate).
import React from 'react'
import { useLink } from '@linked/react'
...
// Instead of const [ name, setName ] = useState('')
const $name = useLink('');
Usage with React Component.
import React from 'react'
// Instead of React.Component...
import { LinkedComponent } from '@linked/react'
...
// In a render, do
const $name = this.$at('name');
// Or, to link all the state members at once...
const state$ = this.state$();
Refer to the databinding examples and the manual for the typical data binding scenarios.
Use linked-controls project as the starting boilerplate for your components.
NestedLink is an abstraction of the data binding independent on both the particular control and the state container. The default binding implemented in the library is for the standard React state. It's fairly easy to create your own.
You need to subclass React.Component and make your own $at
and state$
methods.
You can either use Link.value
inside to create links dynamically, or extend the Link
as it's done in /valuelink/src/component.ts.
It'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:
yarn
- installs the dependencies.
yarn build
- compiles everything including examples.
valuelink/tags.jsx
is moved to the dedicated package linked-controls
.useLink()
to create the state link.useIO()
to perform promised IO on mount.useLocalStorage()
to persist links to the local storage (loaded on mount, saved on unmount).this.linkAt -> this.$at
, this.linkAll
-> this.state$
)Link.getValues()
, Link.setValues()
, Link.getErrors()
React Hooks support.
useLink( initValue )
- create linked state.setLinks({ lnk1, lnk2, ... }, json )
- bulk set link values from an object.linksValues({ lnk1, lnk2, ... })
- extract values object from links.linksErrors({ lnk1, lnk2, ... })
- extract errors object from links.<input {...link.props} />
can be used to bind the link to any of the standard controls expecting value
and onChange
props.FAQs
Purely functional two-way data binding and form validation for React
The npm package @linked/react receives a total of 122 weekly downloads. As such, @linked/react popularity was classified as not popular.
We found that @linked/react demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.