https://github.com/danvk/reactjs-prop-validation
A ReactJS Mixin which enforces that a Component document all its props in propTypes.
https://github.com/danvk/reactjs-prop-validation
Last synced: 12 months ago
JSON representation
A ReactJS Mixin which enforces that a Component document all its props in propTypes.
- Host: GitHub
- URL: https://github.com/danvk/reactjs-prop-validation
- Owner: danvk
- License: apache-2.0
- Created: 2014-09-18T20:42:45.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2014-09-18T23:42:45.000Z (almost 12 years ago)
- Last Synced: 2025-07-09T09:13:01.741Z (about 1 year ago)
- Language: JavaScript
- Size: 148 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
reactjs-prop-validation
=======================
A ReactJS Mixin which enforces that a Component document all its props in propTypes.
Usage
-----
```html
/** @React.DOM */
var Root = React.createComponent({
propTypes: {
name: React.PropTypes.string.isRequired
},
mixins: [PropValidationMixin],
render: function() {
return <div>{this.props.name}</div>;
}
});
React.renderComponent(<Root name="Bob" />, document.getElementById('content'));
```
This enforces a requirement that every `prop` that the `Root` component
accesses appears in `propTypes` (at least in dev mode on browsers which support
it, see below).
Why would you want this?
------------------------
It's good practice to document the API of your components. The `propTypes`
field lets you do this in a way that's enforced at runtime and hence unlikely
to drift vs. the implementation.
The built-in `propTypes` system is more of a property validation system than a
complete API spec. There's nothing that forces you to enumerate all your
component's `props` in the `propTypes` section. This Mixin changes that.
If you want to use a component and you see `mixins: [PropValidationMixin]`,
then you can be confident that its `propTypes` section specifies its complete API.
How does it work?
-----------------
When you mix in `PropValidationMixin`, it wraps an ES6 Proxy around
`this.props` which intercepts all reads from `this.props`. When you read
`this.props.foo`, it checks that `foo` appears in `this.propTypes`. This
ensures that the component can't ever use a property that it doesn't specify.
Note that this requires the ES6 Proxy, which is currently only supported in
Firefox.
Just like `propTypes`, `PropValidationMixin` is a no-op when you use the
production version of ReactJS (i.e. the minified version). It won't affect the
performance or behavior of your site.
Development
-----------
To get going, run:
```bash
npm install
```
Then open test/dev.html in Firefox.