@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.26 (2024-09-12)

:bug: Bug Fix

• chrome
  • #1920 fix(chrome): prevent focus on closed Sheet (@jzempel)
• dropdowns
  • #1919 fix(dropdowns): forwards menu button ref correctly (@geotrev)
• modals
  • #1917 fix(tooltips): ensure correct padding for TooltipDialog's inner elements if Close btn exists (@ze-flo)
• dropdowns, theming
  • #1918 fix(dropdowns): prevents menus focus focusing items early during animation (@geotrev)
• typography
  • #1916 fix(typography): set CodeBlock background to background.recessed (@jzempel)
  • #1915 fix(typography): revert react-prism-renderer to v1 (@jzempel)

:seedling: Internal

• #1914 docs: add removal of theme default prop ADR (@ze-flo)