Awesome
<a href="https://beyonk.com"> <br /> <br /> <img src="https://user-images.githubusercontent.com/218949/144224348-1b3a20d5-d68e-4a7a-b6ac-6946f19f4a86.png" width="198" /> <br /> <br /> </a>Beyonk Tag Input
Demo
View a demo page.
Usage
Installation:
npm i -D @beyonk/svelte-tag-input
Props
There are a couple of properties you can pass to the tag input:
tags
An array containing preexisting tags for the input. Bind to this to keep your array up to date with changes:
<script>
let myTags = [ 'foo', 'bar' ]
</script>
<TagInput bind:tags={myTags}>
colour={function}
A function which takes the tag content as the only parameter and uses it to generate a CSS colour. The default function creates a hashcode from the tag content and creates a pastel colour based on it.
delimiter
The delimiter which, when pressed, will create a new tag from the current content. Duplicate tags are not added.