Package Exports

react-link-state-vm

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-link-state-vm) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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:

// 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
      })
  };
}