@zendeskgarden/react-tags
Advanced tools
Components relating to tags in the Garden Design System
@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.
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>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 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 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.
This package includes components relating to tags in the Garden Design System.
npm install @zendeskgarden/react-tags
# Peer Dependencies - Also Required
npm install react react-dom styled-components @zendeskgarden/react-theming
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>;
v9.0.0-next.24 (2024-08-29)
tabs
avatars
FAQs
Components relating to tags in the Garden Design System
The npm package @zendeskgarden/react-tags receives a total of 174,119 weekly downloads. As such, @zendeskgarden/react-tags popularity was classified as popular.
We found that @zendeskgarden/react-tags demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."