spazard1
commented
2 weeks ago You have to add custom attributes to your tags, and then style those attributes. In your case, every time a new tag is added, also add an attribute that indicates it is new. Instead of storing the tags as a list of strings, store them in tagify as a list of objects, that have a "value" key (this is the displayed value of the tag), and then any other attributes you want. I add one to my tags called "data-sortorder" and then style based on their sort order.
const decorateSortOrder = useCallback( (tagsToDecorate) => { return tagsToDecorate?.map((tag) => ({ value: tag, "data-sortorder": tags.dictionary[tag] })); }, [tags], );
.imageTag[data-sortorder="10"] { background-color: lightgreen; border: 0.1rem solid limegreen; }
First off: Thank you thank you thank you for the library.
My project uses tagify with an ajaxed whitelist/suggestion list. If a new item is added to the tag list, the tag value is saved to the db when the form is saved.
A user asked if there was a way to indicate if a tag is new, to prevent typos. For example, if the current list of tags was "dog, cat", and the user entered "cot", for "cot" to be highlighted yellow (e.g.) to indicate that's it's different from "cat". On save, "cot" would still be saved.
I saw the "transform tag" but couldn't see if this was possible.
Cheers and thanks again!