npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

twio

v1.1.3

Published

Two Way Data Binding for React. Twio boxes data, providing a simple, fast interface for managing data.

Downloads

19

Readme

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

or

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('[email protected]');
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 [email protected]. 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>
    );
  }
}

Contributing

Contributions are welcome. Please post any feedback to the Twio project page.

Authors

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Attributions

Version Updates

1.1.3

  • Value getter and setter
  • Factory function can accept a update handler as a first parameter.