# react-collapsible-tags

> Simple react responsive tags component. Shows "more" tag when tags content overflow its container width.

Latest version **0.0.3** (published 2023-11-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-collapsible-tags
pnpm add react-collapsible-tags
yarn add react-collapsible-tags
bun add react-collapsible-tags
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2023-11-27 |
| First published | 2023-11-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 81.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | unk774 |
| Maintainers | unk774 |

## Links

- npm: https://www.npmjs.com/package/react-collapsible-tags
- Repository: https://github.com/unk774/react-collapsible-tags
- Homepage: https://github.com/unk774/react-collapsible-tags#readme
- Issues: https://github.com/unk774/react-collapsible-tags/issues
- npm.io page: https://npm.io/package/react-collapsible-tags

## Dependencies (1)

- [@react-hook/resize-observer](https://npm.io/package/@react-hook/resize-observer.md) ^1.2.6

## Recent versions

- 0.0.3 (latest) — 2023-11-27
- 0.0.2 — 2023-11-27
- 0.0.1 — 2023-11-27

## README

# react-collapsible-tags
Simple react responsive tags component. Shows "more" tag when tags content overflow its container width.

Has wrappers for tags, "more", "+" modification.

Props:
```javascript
    tags?: string[]; //Tags string array. Also Children can be used for tags render 
    onAddTagClick?: () => void; //on "+" tag click
    onTagClick?: (tag: string) => void; //on tags click
    onMoreClick?: (moreCount: number) => void; //on "more ..." tag click
    addRender?: () => React.JSX.Element; //override "+" render
    moreRender?: (moreCount: number) => React.JSX.Element; //override "more" render
```

## Usage/Examples

```javascript
...
import CollapsibleTags from "react-collapsible-tags/lib/index"

function App() {
	const [tags, setTags] = useState(["some text 1...","some text 2...","some text 3..."])
    
	return <div style={{width: "300px"}}>
	  <CollapsibleTags tags={tags}
		  onAddTagClick={() => {
			  setTags(tags.concat(`some text ${tags.length + 1}...`))}
		  }/>
	  {/*custom tags*/}
	  <CollapsibleTags onAddTagClick={() => {
		  setTags(tags.concat(`some text ${tags.length + 1}...`))}
	  }>
		  {tags.map(tag => <div style={{border: "1px solid red", margin: "4px", borderRadius: "4px"}}>
			  {tag}
		  </div>)}
	  </CollapsibleTags>
  </div>
}
```

---
_Source: https://npm.io/package/react-collapsible-tags · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._