# react-data-tags

> A small wrapper to add data-tags to your react components

Latest version **1.0.0** (published 2022-10-31) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-10-31 |
| First published | 2022-10-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 5.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | John Anderson |
| Maintainers | webkoils |

## Links

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

## Dependencies (1)

- [param-case](https://npm.io/package/param-case.md) ^3.0.4

## Recent versions

- 1.0.0 (latest) — 2022-10-31
- 0.0.1 — 2022-10-31

## README

# react-data-tags

A small wrapper to add data-tags to your react components

## Usage

#### Option 1: Wrapping Component

Input:

```jsx
<DataTags label="foo" value="bar">
  <div className="element-to-add-tags-to" >{...}</div>
</DataTags>
```

Output:

```html
<div class="element-to-add tags to" data-label="foo" data-value="bar">...</div>
```

_this also works for multiple children_

Input:

```jsx
<DataTags label="foo" value="bar">
  <div className="element-to-add-tags-to-1" >{...}</div>
  <div className="element-to-add-tags-to-2" >{...}</div>

</DataTags>
```

Output:

```html
<div class="element-to-add-tags-to-1" data-label="foo" data-value="bar">
  ...
</div>
<div class="element-to-add-tags-to-2" data-label="foo" data-value="bar">
  ...
</div>
```

#### Option 2: HOC Component

Input:

```jsx
import { Button } from './button'
const ButtonWithTags = withDataTags(Button, {
  tags: { foo: 'bar', anotherTag: 'val2' },
})

;<ButtonWithTags
  {...buttonProps}
  /* The dataTags prop will overwrite the tags from the HOC */
  dataTags={{ anotherTag: 'value2' }}
>
  ButtonContent
</ButtonWithTags>
```

Output:

```html
<button data-another-tag="value2" data-foo="bar">ButtonContent</button>
```

_this also works for multiple children_

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