gaperton

// Minimal working example demonstrating the two-way data binding with React Hook.
import React, { useState } from 'react'

export const MyCoolComponent = () => {
    const [ name, setName ] = useState( '' );

    return (
        <input value={ name }
               onChange={ e => setName( e.target.value ) }
        />

gaperton

// Minimal working example demonstrating the two-way data binding with React Hook.
import { useLink } from 'valuelink'
import * as React from 'react'

export const MyCoolComponent = () => {
    const name = useLink( '' );

    return (
        <input {...name.props} />
    )

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

gaperton

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

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

gaperton

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

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

gaperton

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

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

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

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

gaperton

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

gaperton

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