gaperton

<label> Name:
  <input  type="text"
          value={ state.name }
          onChange={ e => this.setState({ name : e.target.value }) }/>
</label>

<label> Email:
  <input  type="text"
          value={ state.email }
          onChange={ e => this.setState({ email : e.target.value }) }/>

gaperton

const Input = ({ ???, ...props }) => (
   <input {...props}
     onChange={ ? }
     value={ ? }
   />
);

gaperton

function linkState( component, attr ){
  return {
    value : component.state[ attr ],
    set( x ){
      component.setState({ [ attr ] : x });
    }
}

gaperton

<Input type="text" link={ linkState( this, 'name' ) } />

gaperton

const Input = ({ link, ...props }) => (
   <input {...props}
     onChange={ e => link.set( e.target.value ) }
     value={ link.value }
   />
);

gaperton

render(){
  const linked = this.linkAll();
  return (
    <form onSubmit={ this.onSubmit }>
      <label> Name:
        <input type="text" { ...linked.name.props } />
      </label>
      
      <label> Email:
        <input type="text" { ...linked.email.props } />

gaperton

@define class UserForm extends React.Component {
    static state = {
        name : '',
        email : '',
        isActive : true
    }

    onSubmit = () => { /* TBD */ };
    onCancel = () => { /* TBD */ };

gaperton

import { define, Record } from 'type-r';

@define
export class Box extends Record {
    static attributes = {
        x : Number,
        y : Number,
        location : String    
    }

gaperton

const AfterRenderMixin = {
    componentDidMount : callAfterRenderHooks,
    componentDidUpdate : callAfterRenderHooks,

    afterRender( hook ){
        const { _callAfterRender } = this;
        this._callafterRender = _callAfterRender ? () => {
            _callAfterRender();
            hook();
        } : hook;

gaperton

import React from 'react';
import { useLink } from 'valuelink'

function Example() {
  const counter = useLink(0);

  return (
    <div>
      <p>You clicked {counter.value} times</p>
      <button onClick={counter.action( x => x + 1 )}>