Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ryanhefner/clean-react-props
🛁 Utility functions for passing clean React props to HTML and SVG elements.
https://github.com/ryanhefner/clean-react-props
clean props react utility
Last synced: about 2 months ago
JSON representation
🛁 Utility functions for passing clean React props to HTML and SVG elements.
- Host: GitHub
- URL: https://github.com/ryanhefner/clean-react-props
- Owner: ryanhefner
- License: mit
- Created: 2017-07-28T14:33:32.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-03-11T16:04:35.000Z (almost 5 years ago)
- Last Synced: 2024-11-01T12:35:47.969Z (2 months ago)
- Topics: clean, props, react, utility
- Language: JavaScript
- Homepage: https://www.pkgstats.com/pkg:clean-react-props
- Size: 560 KB
- Stars: 6
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# 🛁 clean-react-props
Utility functions for passing clean React props to HTML and SVG elements.
Since React 15.2.x, warnings are thrown when attributes are applied to HTMLElements
that are not natively supported by React. This utility helps you to prevent those
warnings and help you create consistent and clean components. You can read more
about it, [here](https://facebook.github.io/react/warnings/unknown-prop.html).
## Install
Via [npm](https://npmjs.com/package/clean-react-props):
```sh
npm install --save clean-react-props
```
Via [Yarn](https://yarn.fyi/clean-react-props):
```sh
yarn add clean-react-props
```
## How to use
When building components, it’s always a good idea know what properties your component
expects and confirm that they handle them properly. But, in some cases your component
could end up getting more than it asked for, that's where `clean-react-props` come
in handy.
In order to cleanly compose your components, it's best if they keep the props chain
alive (where necessary), and remove the props that are either specific to your component
or in addition to what your component expects.
### HTMLElements
```js
import cleanProps from 'clean-react-props';
...
render() {
const {
aProp,
anotherProp,
children,
} = this.props;
return (
{children}
);
}
...
```
### SVGElements
React is also opinionated about the attributes that it supports for SVGElements.
So, I’ve included a utility that you can use specifically for `` tags in your
code.
```js
import { cleanSVGProps } from 'clean-react-props';
...
render() {
return (
);
}
...
```
### Excluding props
In some cases, it’s handy to be able to exlude valid props from being applied to
an element, in the event that prop is maybe used on a child element, or if for
some reason that component manages that prop differently. If you run into a spot
where you ned to exclude some props, pass an array of the prop names you’d like
to exclude.
```js
import cleanProps from 'clean-react-props';
...
render() {
const {
aProp,
anotherProp,
children,
} = this.props;
return (
{children}
);
}
...
```
### Specifying custom attributes
React–as of 16.*–now supports custom attributes on components. Which means that
as of that release, this package may not as useful as it once was, but it allows
you to be specific about the attributes that are applied to the rendered DOM
elements. To specify custom attributes that you’d like to retain, just do the
following.
```js
import cleanProps from `clean-react-props`;
...
render() {
const {
aProp,
myCustomAttribute,
children,
} = this.props;
return (
{children}
);
}
...
```
## License
[MIT](LICENSE) © [Ryan Hefner](https://www.ryanhefner.com)