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 |