Skip to content
🔖 A text field that tokenizes input, for things like tags.
JavaScript
Branch: master
Clone or download
Latest commit c7903e9 Aug 15, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Fix incorrect CSS import (kinda stretching the boundaries of rollup here Dec 23, 2015
test Update to the latest preact Aug 15, 2016
.eslintignore Initial commit Dec 23, 2015
.eslintrc Initial commit Dec 23, 2015
.gitignore
.npmignore Initial commit Dec 23, 2015
.travis.yml Initial commit Dec 23, 2015
LICENSE Initial commit Dec 23, 2015
README.md Initial commit Dec 23, 2015
package.json 0.3.0 Aug 15, 2016
rollup.config.js Update devDeps Aug 15, 2016

README.md

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

You can’t perform that action at this time.