GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → developit → preact-token-input

developit / preact-token-input

Licence: MIT license
🔖 A text field that tokenizes input, for things like tags.

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

preacttagstaggingtag-inputpreact-components

Projects that are alternatives of or similar to preact-token-input

preact-motion
A fork of React-Motion to be used with Preact
Stars: ✭ 28 (-50.88%)
Mutual labels:  preact, preact-components
preact-perf-profiler
A HOC to enable measuring rendering performance for Preact components
Stars: ✭ 18 (-68.42%)
Mutual labels:  preact, preact-components
preact-views
📺 Named views for Preact, with easy-as-pie linking between them.
Stars: ✭ 39 (-31.58%)
Mutual labels:  preact, preact-components
Supertag
A tag-based filesystem
Stars: ✭ 207 (+263.16%)
Mutual labels:  tags, tagging
preact-route-async
Easy asynchronous loading for your router components. For 440B.
Stars: ✭ 36 (-36.84%)
Mutual labels:  preact, preact-components
React Native Tag Input
A simple React Native component that creates an input for tags, emails, etc.
Stars: ✭ 217 (+280.7%)
Mutual labels:  tags, tagging
preact-custom-scrollbars
⇅ Preact scrollbars component
Stars: ✭ 20 (-64.91%)
Mutual labels:  preact, preact-components
Hangfire.tags
Add tags to Hangfire backgroundjobs
Stars: ✭ 42 (-26.32%)
Mutual labels:  tags, tagging
tag-picker
Better tags input interaction with JavaScript.
Stars: ✭ 27 (-52.63%)
Mutual labels:  tags, tagging
React Tags
⚛️ A fantastically simple tagging component for your React projects
Stars: ✭ 321 (+463.16%)
Mutual labels:  preact, tagging
Hypertag
Knowledge Management for Humans using Machine Learning & Tags
Stars: ✭ 116 (+103.51%)
Mutual labels:  tags, tagging
SSCTaglistView
Customizable iOS tag list view, in Swift.
Stars: ✭ 54 (-5.26%)
Mutual labels:  tags, tagging
Tagify
🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue
Stars: ✭ 2,305 (+3943.86%)
Mutual labels:  tags, tagging
Tagsistant
Semantic filesystem for Linux, with relation reasoner, autotagging plugins and a deduplication service
Stars: ✭ 244 (+328.07%)
Mutual labels:  tags, tagging
Redoflacs
Parallel BASH commandline FLAC compressor, verifier, organizer, analyzer, and retagger
Stars: ✭ 71 (+24.56%)
Mutual labels:  tags, tagging
preact-component-console
A console emulator for preact.
Stars: ✭ 29 (-49.12%)
Mutual labels:  preact, preact-components
Taggle.js
📝 Form-ready dependency-less tagging.
Stars: ✭ 644 (+1029.82%)
Mutual labels:  tags, tagging
React Input Tags
React component for tagging inputs.
Stars: ✭ 10 (-82.46%)
Mutual labels:  tags, tagging
preact-bind-group
Preact Component to Group Form fields onChange Events to a single Callback
Stars: ✭ 25 (-56.14%)
Mutual labels:  preact, preact-components
tagify
Tagify produces a set of tags from a given source. Source can be either an HTML page, a Markdown document or a plain text. Supports English, Russian, Chinese, Hindi, Spanish, Arabic, Japanese, German, Hebrew, French and Korean languages.
Stars: ✭ 24 (-57.89%)
Mutual labels:  tags, tagging
View All Similar Projects ➔

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].