react-link-state-vm

Link state with virtual method.

Live example

To use the experimental function bind operator ::, you need @babel/plugin-proposal-function-bind (or @babel/preset-stage-0). Or you can use Function.prototype.call to assign correct this value. Example:

``js
// Proposal 👍
this::valueLink("name");

// Standard
valueLink.call(this, "name");
`

Example Input

`js
import { valueLink } from "react-link-state-vm";

class ExampleComponentWithInput extends Component {
render() {
// this.state.name -> undefined | "some text"
return ;
}
}
`

$3

`js
import { checkedLink } from "react-link-state-vm";

class ExampleComponentWithCheckbox extends Component {
render() {
// this.state.race -> undefined | true | false
return ;
}
}

class ExampleComponentWithMultiCheckbox extends Component {
render() {
// this.state.category -> undefined | [] | ["motogp", "moto3", ...]
return (

);
}
}

class ExampleComponentWithRadio extends Component {
render() {
// this.state.category -> undefined | "motogp" | ...
return (

);
}
}
`

$3

`js
import { selectedLink } from "react-link-state-vm";

class ExampleComponentWithSelect extends Component {
render() {
// this.state.bike -> undefined | "ducati" | ...
return (

Ducati
Honda
Suzuki
Yamaha

);
}
}

class ExampleComponentWithMultiSelect extends Component {
render() {
// this.state.bikes -> undefined | [] | ["ducati", "honda", ...]
return (

Ducati
Honda
Suzuki
Yamaha

);
}
}
`

$3

In a simple form, valueLink could be just a function that returns value and onChange handler.

`js
function valueLink(name) {
return {
value: this.state[name],
onChange: ({ target: { value } }) =>
this.setState({
[name]: value
})
};
}
``