react-link-state-vm
Link state with virtual method.
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:
// Proposal 👍
this::valueLink("name");
// Standard
valueLink.call(this, "name");Example Input
import { valueLink } from "react-link-state-vm";
class ExampleComponentWithInput extends Component {
render() {
// this.state.name -> undefined | "some text"
return <input type="text" {...this::valueLink("name")} />;
}
}Checkbox and Radio
import { checkedLink } from "react-link-state-vm";
class ExampleComponentWithCheckbox extends Component {
render() {
// this.state.race -> undefined | true | false
return <input type="checkbox" {...this::checkedLink("race")} />;
}
}
class ExampleComponentWithMultiCheckbox extends Component {
render() {
// this.state.category -> undefined | [] | ["motogp", "moto3", ...]
return (
<div>
<input type="checkbox" {...this::checkedLink("category", "motogp")} />
<input type="checkbox" {...this::checkedLink("category", "moto2")} />
<input type="checkbox" {...this::checkedLink("category", "moto3")} />
</div>
);
}
}
class ExampleComponentWithRadio extends Component {
render() {
// this.state.category -> undefined | "motogp" | ...
return (
<div>
<input type="radio" {...this::checkedLink("category", "motogp")} />
<input type="radio" {...this::checkedLink("category", "moto2")} />
<input type="radio" {...this::checkedLink("category", "moto3")} />
</div>
);
}
}Select
import { selectedLink } from "react-link-state-vm";
class ExampleComponentWithSelect extends Component {
render() {
// this.state.bike -> undefined | "ducati" | ...
return (
<select {...this::selectedLink("bike")}>
<option value="ducati">Ducati</option>
<option value="honda">Honda</option>
<option value="suzuki">Suzuki</option>
<option value="yamaha">Yamaha</option>
</select>
);
}
}
class ExampleComponentWithMultiSelect extends Component {
render() {
// this.state.bikes -> undefined | [] | ["ducati", "honda", ...]
return (
<select {...this::selectedLink("bikes", true)}>
<option value="ducati">Ducati</option>
<option value="honda">Honda</option>
<option value="suzuki">Suzuki</option>
<option value="yamaha">Yamaha</option>
</select>
);
}
}About the Implementation
In a simple form, valueLink could be just a function that returns value and onChange handler.
function valueLink(name) {
return {
value: this.state[name],
onChange: ({ target: { value } }) =>
this.setState({
[name]: value
})
};
}
