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

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>
);