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

// 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'

// We don't want to deal with error markup in every input, do we?
const Input = ({ link, ...props }) => {
    return (
      <div>
        <input {...link.props} {...props} />
        <span>{ link.error || '' }</span>

gaperton

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

function Example() {
  const users = useLink([]);

  return (
    <div>
      { users.map( ( user, i ) => (
       <div key={i}>

gaperton

function useLink( init ){
   const [ value, set ] = useState( init );
   // It can be a class with useful methods, like this one: 
   // https://github.com/VoliJS/NestedLink/blob/master/valuelink/src/link.ts
   // But we just use the plain object here to illustrate an idea.
   return { value, set }; 
}

const PickUser = ({ $selected /* link to some upper component state */ }) => {
    // Declare the local component's state as a link.

gaperton

const userToString = x => x.name + ' <' + x.email + '>';

const PickUser = ({ user }) => (
  <div>
    <input value={userToString(user)}/>
  </div>
)

gaperton

export const EditUser = ({ $selected, close }) => {
    const $filter = useLink('');

    return (
        <>
            <DelayedInput autoFocus
                $value={ $filter }
                placeholder="Start typing..."
                onBlur={ close } />
            

gaperton

function useBoundLink( source ){
    // If the source is another Link, extract the value out of it.
    const value = source instanceof Link ? source.value : source,
          link = useLink( value );

    // If the value changes, execute link.set( value ) after the render.
    useEffect(() => link.set( value ), [ value ]);

    return link;
}

gaperton

export const DelayedInput = ({ $value, timeout = 1000, …props }) => {
 const $inputValue = useBoundLink( $value );
 // TODO: How to sync the state back?
 return <input {…$inputValue.props} {…props}/>;
}

gaperton

export const DelayedInput = ({ $value, timeout = 1000, ...props }) => {
    const $inputValue = useBoundLink( $value )
        .onChange(
            useThrottle(
                x => $value.set( x ),
                timeout,
                [ $value.value ]
            )
        );