⚛️✔️ filter-react-props
Filter allowed React & DOM props to avoid warnings and unnecessary attributes in HTML output.
It's only 1.3 kB (gziped UMD version, it's even less when you uglify ES Modules verision).
Installation
yarn
yarn add filter-react-props
npm
npm install --save filter-react-props
cdn
https://unpkg.com/filter-react-props
Usage
import filterReactProps from 'filter-react-props' or const filterReactProps = or <script ="https://unpkg.com/filter-react-props"></script>const default: filterProps = filterReactProps
Use case
Consider this style component:
const Button = <button = /> <Button ="green">My Button</Button>
Button will render with unnecessary color
attribute.
My Button
It can be avoided by destructuring props object:
const Button = color ...props <button = // />
But you can't apply this solution when you don't know what props will be passed. This is use case for this package:
import filterReactProps from 'filter-react-props' const Button = <button = /> <Button = ="green">My Button</Button>
Full API
// Get new object with allowd React & DOM props.filterReactProps // Array of allowed React & DOM props. // List borrowed from `react-emotion` package. allowedProps // Regular expression for checkig if given string // is allowed React or DOM prop. // Necessary for checking data-* and aria-* attributes. allowedPropsRegExp // Check if given prop is allowed React or DOM prop. isPropAllowed from 'filter-react-props'
Package versions
Package comes in three versions:
- UMD - transpiled, bundled, minified (
main
field inpackage.json
) - for use in browser or CommonJS. - ES Modules - transpiled ES Modules (
module
field inpackage.json
) - for tree shaking. - ES Next - untranspiled ES Modules (
exnext
field inpackage.json
) - read why.