Twio NPM | npm.io

npm

Twio

Twio is a lightweight Javascript project (using ES6) for two way data binding. Twio works with React Components without mixins. Twio is short for Two Way Input Output. Twio performs one and only one task, two way data binding. Twio should be compatible with any system using ES6. In the future we might consider writing a more quirksmode version, however the succinctness of ES6 is a big plus.

Getting Started

Twio is easy to use, and provided under the MIT license. Twio has no dependencies. To use Twio you should be somewhat familiar with ES6. Twio tackles the problem of two way data binding. Two way data binding is a concept where you bind a Javascript variable to a DOM attribute or property; whenever either changes, both change. Twio boxes data in Javascript, and provides an interface to handle the data manipulation.

Prerequisites

Twio has no dependencies.

Installing

Install Twio into your ES6+ project using NPM.

npm i --save twio

Usage

To start using Twio in a component, you can import it using the following:

Import or Require

import Twio from 'twio';

const Twio = require('twio');

Get a Twio object

Twio is a factory function. The factory function will return a new instance of a Twio object. You can optionally provide the initial value as the first parameter. Twio will assign an empty string if no initial value is provided. You can optionally provide an update handler as a second parameter. If you pass a update handler as the first parameter, your Twio object will initialize using an empty string and assign the update handler. The update handler is important for two way data binding.

Examples of getting a Twio object

const username = Twio();
const email = Twio('initial@value.com');
const name = Twio('John', name => this.setState({name}));
const phone = Twio(phone => this.setState({phone}));

After running the code above, username will have a new instance of a Twio object with an empty string value. Email will be a Twio object that is initialized with the value initial@value.com. Name will be initialized with John and an update handler will be fired every time an onChange event fires. Phone will be a Twio object that is initialized with an empty string and has an update handler for onChange events.

You can also explicitly assign a value using the .set() method. Changing a value using .set() will also call the update handler.

username.set('myuser');

You can add an update handler to a Twio object by calling .changes(). Update handlers should be functions which accept one parameter, the Twio object. Update handlers will fire during onChange events, as well as Javascript calls to .set()

username.changes(username => this.setState({ username }));

Example of the Twio object data flow

const name = Twio( name => console.log(name.toString()) );
name.set('Billy Bob'); // console shows: Billy Bob

Twio can be used in the render method of your component. An input field can use Twio easily.

<input type="text" value={this.state.name} onChange={this.state.name.onChange} />

Whenever a change occurs, the update handler is called, which will update the component state using setState.

Form Example

An example of Twio providing a two way data binding.

import Twio from "twio";
class SignUp extends Component {
  constructor() {
    this.state = {
      firstName: Twio(firstName => this.setState({firstName})),
      lastName: Twio(lastName => this.setState({lastName})),
      email: Twio(email => this.setState({email})),
      password: Twio(password => this.setState({password})),
    };
  }
  render() {
    return (
      <form>
        <input type="text" value={this.state.firstName} onChange={this.state.firstName.onChange} />
        <input type="text" value={this.state.lastName} onChange={this.state.lastName.onChange} />
        <input type="text" value={this.state.email} onChange={this.state.email.onChange} />
        <input type="password" value={this.state.password} onChange={this.state.password.onChange} />
      </form>
    );
  }
}