preact-token-input

0.3.0 • Public • Published

preact-token-input

NPM travis-ci

A text field that tokenizes input, for things like tags.

CodePen Demo

preact-token-input


Usage Example

Use <TokenInput /> like a normal <input>. It supports the same props/attributes, including value, onInput() and onChange().

import TokenInput from 'preact-token-input';
 
const Tags = ({ tags, ...props }) => (
    <label class="tags">
        Add some tags:
        <TokenInput value={tags} {...props} />
    </form>
);
 
let tags = ['new', 'noteworthy', 'tech'];
render(<Tags list={tags} />, document.body);

Usage with Linked State

<TokenInput /> works with Linked State exactly the same way as any other input field:

import TokenInput from 'preact-token-input';
 
class Form extends Component {
    render(props, { tags }) {
        return (
            <form>
                <TokenInput value={tags} onChange={ this.linkState('tags') } />
            </form>
        );
    }
}
 
render(<Form />, document.body);

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i preact-token-input

Weekly Downloads

2

Version

0.3.0

License

MIT

Last publish

Collaborators

  • developit