Skip to content

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

License

Notifications You must be signed in to change notification settings

jeysal/react-data-props

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-data-props

npm package license

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

Installation

yarn add react-data-props

Usage

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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published