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.
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.
Twio has no dependencies.
Install Twio into your ES6+ project using NPM.
npm i --save twio
To start using Twio in a component, you can import it using the following:
import Twio from 'twio';
or
const Twio = require('twio');
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.
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 }));
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.
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>
);
}
}
Contributions are welcome. Please post any feedback to the Twio project page.
- Gregory Bramwell - Initial work - gregbramwell
See also the list of contributors who participated in this project.
This project is licensed under the MIT License - see the LICENSE.md file for details
- Value getter and setter
- Factory function can accept a update handler as a first parameter.