react-data-tags

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

Usage

Option 1: Wrapping Component

Input:

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

Output:

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

this also works for multiple children

Input:

<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:

<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:

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:

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

this also works for multiple children