TagSelector

The TagSelector component allows users to assign tags to a record. It supports selecting from a predefined list of tags or creating new ones.

Installation

bash

npm i @anakin-gbit/tag-selector

Usage

Below is an example of how to integrate the TagSelector component into your project:

tsx

import { TagSelector } from '@anakin-gbit/tag-selector';

<TagSelector
  availableTags={availableTags}
  selectedTags={selectedTags}
  onUpdateTags={handleUpdateTags}
  onAddTag={handleAddTag}
/>

Tag1

Tag5

Tag2

Tag0

Tag3

Tag4

Tag6

Customizing Styles

You can customize the styles of the TagSelector component by overriding the following CSS variables:

css

/* Tag background and text color */
--internal-tag-bg: var(--pallet-background, #f9f9f9);
--internal-tag-text: var(--pallet-text, #333333);

/* Remove button */
--internal-tag-remove: var(--pallet-highlight, #ff5c5c);
--internal-tag-remove-hover: var(--pallet-link-hover, #ff0000);

/* Input styles */
--internal-input-bg: var(--pallet-background, #ffffff);
--internal-input-border: var(--pallet-border, #dddddd);
--internal-input-text: var(--pallet-text, #333333);

/* Suggestion styles */
--internal-suggestion-bg: var(--pallet-background-alt, #e6f7ff);
--internal-suggestion-border: var(--pallet-border, #91d5ff);
--internal-suggestion-hover-bg: var(--pallet-link-hover, #bae7ff);

These variables control the visual appearance of tags, input fields, and suggestions in the TagSelector component. You can override them in your global styles or locally for specific instances of the component.

Props

The following props are available to customize the behavior and appearance of the TagSelector:

availableTags (required) - A list of available tags that the user can select from. Each tag object should contain an id and name property.
selectedTags (required) - An array of IDs of tags that are currently selected. This is used to highlight selected tags and exclude them from the available tags list.
onUpdateTags (required) - A callback function that is called when the selected tags change. This should update the parent component’s state for the selected tags.
onAddTag (required) - A callback function that is triggered when the user adds a new tag. The name of the new tag is passed to the callback.
maxSuggestions (optional) - A number to limit the number of suggestions displayed. By default, this is set to 5.

Example of Dynamic Tag Addition

The following example demonstrates how you can dynamically add new tags to the TagSelector:

tsx

const handleAddTag = (name: string) => {
  const newTagId = Math.random().toString();
  const newTag = { id: newTagId, name };
  setAvailableTags((prev) => [...prev, newTag]);
  setSelectedTags((prev) => [...prev, newTagId]);
};

Conclusion

The TagSelector component is flexible and highly customizable. You can easily integrate it into your application to manage tags efficiently. Customize its appearance with CSS variables and manage tag selection with the provided callbacks.