@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.2.0 (2024-11-21)

:rocket: New Feature

• dropdowns
  • #1971 feat(dropdowns): add hasSelection prop for use with <Option type="next"> (@jzempel)

:bug: Bug Fix

• tags, theming, typography
  • #1979 fix(theming): getColor shade default depends on transparency (@jzempel)

:seedling: Internal

• Other
  • #1977 chore(deps): bump serve-static, express and @zendeskgarden/scripts (@dependabot[bot])
  • #1976 chore(deps): bump send, express and @zendeskgarden/scripts (@dependabot[bot])
  • #1975 chore(deps): bump body-parser, express and @zendeskgarden/scripts (@dependabot[bot])
  • #1974 chore(deps): bump cookie, express and @zendeskgarden/scripts (@dependabot[bot])
• tables
  • #1972 chore(config): migrate renovate config (@renovate[bot])