@zendeskgarden/react-tags

What is @zendeskgarden/react-tags?

@zendeskgarden/react-tags is a React component library that provides a set of components for creating and managing tags in a user interface. It is part of the Zendesk Garden design system, which offers a cohesive set of components for building modern web applications.

What are @zendeskgarden/react-tags's main functionalities?

Tag Creation

This feature allows you to create a simple tag component. The `isPill` prop can be used to style the tag with rounded edges, making it look like a pill.

<Tag isPill={true}>Example Tag</Tag>

Removable Tags

This feature provides the ability to create tags that can be removed by the user. The `isRemovable` prop enables a close button on the tag, and the `onRemove` callback is triggered when the tag is removed.

<Tag isRemovable={true} onRemove={() => console.log('Tag removed')}>Removable Tag</Tag>

Tag List

This feature allows you to create a list of tags using the `TagList` component. It helps in organizing multiple tags in a structured manner.

<TagList><Tag>Tag 1</Tag><Tag>Tag 2</Tag></TagList>

Other packages similar to @zendeskgarden/react-tags

react-tag-input

react-tag-input is a popular package for creating tag input fields in React applications. It provides a flexible and customizable tag input component, similar to @zendeskgarden/react-tags, but with a focus on input fields rather than standalone tags.

react-tagsinput

react-tagsinput is another package for handling tags in React. It offers a simple and intuitive interface for adding and removing tags, similar to @zendeskgarden/react-tags, but with a more minimalistic approach.

react-select

react-select is a flexible and customizable select input control for React. While it is primarily used for dropdowns, it also supports multi-select and tagging features, making it comparable to @zendeskgarden/react-tags in terms of tag management capabilities.

README

@zendeskgarden/react-tags

This package includes components relating to tags in the Garden Design System.

Installation

npm install @zendeskgarden/react-tags

# Peer Dependencies - Also Required
npm install react react-dom styled-components @zendeskgarden/react-theming

Usage

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Tag } from '@zendeskgarden/react-tags';

/**
 * Place a `ThemeProvider` at the root of your React application
 */
<ThemeProvider>
  <Tag pill>
    <Tag.Avatar>
      <img alt="" src="images/user.png" />
    </Tag.Avatar>
    Example User
    <Tag.Close
      aria-label="press delete to remove Example User tag"
      onClick={() => alert('remove tag')}
    />
  </Tag>
</ThemeProvider>;

Changelog

v9.0.0-next.27 (2024-09-26)

:rocket: New Feature

• loaders, theming
  • #1926 feat(loaders): allow color props to receive color variable keys in addition to hex values (@jzempel)

:bug: Bug Fix

• dropdowns
  • #1930 fix(dropdowns): ensure focus is returned to menu trigger before calling onChange (@ze-flo)
• colorpickers, modals, theming
  • #1929 chore: v9 QA sweep (@jzempel)
    • decrease space between ColorPickerDialog/ColorSwatchDialog and trigger
    • prevent render thrashing on getColor storybook demo
    • split migration guides out of historical changelogs for improved website documentation
• avatars, colorpickers
  • #1927 fix(colorpickers): prevent arrow from positioning over a ColorSwatchDialog tooltip (@jzempel)

:memo: Documentation

• #1922 docs: adds verbosity to initial v9 migration steps (@geotrev)

:seedling: Internal

• breadcrumbs
  • #1932 chore(breadcrumbs): remove Anchor underline in demo (@jzempel)
• Other
  • #1924 chore(deps-dev): bump rollup from 4.21.0 to 4.22.4 (@dependabot[bot])