Edit

Tags

Import

import { TagList, TagItem } from "/imports/plugins/core/ui/client/components";

Usage Example

import React from "react";
import { TagList } from "/imports/plugins/core/ui/client/components";

const tags = [
  { name: "Shop", slug: "shop" },
  { name: "Example Product", slug: "example-product" }
];

const MyReactComponent = () => {
  return (
    <Tags
      tags={tags}
    />
  )
};

export default MyReactComponent;

Props

TagList

Property	Type	Description
editable	Boolean	True: enable editable tags. False (default) show tags for display only.
enableNewTagForm	Boolean	Show new tag form for creating tags
newTag	Object	Tag object for new tag from. { name: "" }
onGetSuggestions	Function	Passthrough callback from TagItem to request suggestions from container component.
onMoveTag	Function	React DnD drag move callback. (moveIndex, hoverIndex) => {}
onNewTagSave	Function	New Tag save callback. (tag, parentTag) => {}
onNewTagUpdate	Function	New Tag updated callback. (tag, parentTag) => {}
onTagMouseOut	Function	Tag mouse out callback. (tag, parentTag) => {}
onTagMouseOver	Function	Tag mouse over callback. (tag, parentTag) => {}
onTagRemove	Function	Tag remove callback. (tag, parentTag) => {}
onTagSave	Function	Tag save callback. (tag, parentTag) => {}
onTagUpdate	Function	Tag update callback. (tag, parentTag) => {}
parentTag	Tag	ParentTag (Tag) this tag list belongs to.
suggestions	Array[Object]	Array of suggestion for TagItem
tagProps	Object	Props to apply to TagItem
tags	Array[Tag]	Array of Tag objects

TagItem

Property	Type	Description
blank	Boolean	Render a blank, editable tag for adding new tags
connectDragSource	Function	React DnD drag source
connectDropTarget	Function	React DnD drop target
editable	Boolean	True: Display editable tag. False: tag for display
fullWidth	Boolean	Fill with of parent container
i18nKeyInputPlaceholder	String	Input placeholder i18n key
index	Number	Index in array
inputPlaceholder	String	Input placeholder
onGetSuggestions	Function	Ask for suggestions from parent component when needed.
onTagInputBlur	Function	Tag input blur callback. callback signature (event, tag) => {}
onTagMouseOut	Function	Tag mouse out callback. callback signature (event, tag) => {}
onTagMouseOver	Function	Tag mouse over callback. callback signature (event, tag) => {}
onTagRemove	Function	Tag remove callback. callback signature (tag) => {}
onTagSave	Function	Tag save callback. callback signature (event, tag) => {}
onTagUpdate	Function	Tag change callback. callback signature (event, tag) => {}
parentTag	Object	Parent tag if this tag is a child of another.
suggestions	Array[Object]	Array of suggestions for Autosuggest input. [{ label: "Suggestion Label" }]
tag	Object	Tag object, see tag schema