react-data-props

Allow a React component to accept data-* props and apply them to an element

Installation

yarn add react-data-props

Pass all unknown restProps of your component into the dataProps function.

It will

filter out props
- that do not start with data- and
- with boolean or null-ish values and
throw if a data prop
- has an invalid name for a data attribute or
- has a wrong value type.

Spread the return value of dataProps on the element you would like the data attributes applied to.

import dataProps from 'react-data-props';
 
const Thing = ({ text, ...restProps }) => (
  <div {...dataProps(restProps)}>{text}</div>
);