This addon makes the prop-types library available for React style props validation in your Ember application. The addon itself is very simple, it includes:
- AMD compatible import of
prop-typeslibrary (prod optimized import weight of only 0.12KB gzipped). - Ember
Componentreopen in dev builds to callcheckPropTypes, see the component-prop-types initializer (Component reopen stripped for production builds).
Props validations and the validators themselves are all provided by the prop-types library.
ember install ember-cli-prop-types
Import PropTypes into your component JS files and define a propTypes property to
perform validation on passed props:
// your-component.js
import Component from 'ember-component';
import PropTypes from 'prop-types';
export default Component.extend({
// Define prop types for your passed properties here
propTypes: {
title: PropTypes.string.isRequired,
pages: PropTypes.number,
isLatest: PropTypes.bool
}
});The prop-types library will validate that any props passed into your component
match the type specified in propTypes. See the
prop-types Documentation for details on
defining propTypes for your components.
You can validate the majority of Ember classes or other Ember-specific concepts
via the instanceOf type checker. We have added specific support for Ember.Array
and will continue to add support for Ember classes that cannot be validated using
the library as-is.
import Component from 'ember-component';
import EmberObject from 'ember-object';
import DS from 'ember-data';
import PropTypes from 'prop-types';
const { PromiseArray } = DS;
export default Component.extend({
propTypes: {
post: PropTypes.instanceOf(EmberObject),
relatedPosts: PropTypes.instanceOf(PromiseArray),
authors: PropTypes.emberArray.isRequired,
comments: PropTypes.emberArray,
leaveCommentClosureAction: PropTypes.func
}
});PropTypes.emberArray
Destructuring imports is also supported:
import Component from 'ember-component';
import { string, number, bool, func } from 'prop-types';
export default Component.extend({
propTypes: {
title: string.isRequired,
pages: number,
isLatest: bool,
someAction: func
}
});This addon adds the ability to set a default value for passed props through a getDefaultProps
method. This method should return an object with the default props values:
import Component from 'ember-component';
import { string, number, bool } from 'prop-types';
export default Component.extend({
propTypes: {
title: string.isRequired,
pages: number,
isLatest: bool
},
getDefaultProps() {
return {
title: 'Ambitious Props',
pages: 1,
isLatest: false
};
}
});During component initialization, if a prop with a configured default is undefined,
it will be set to the returned default value. This can be especially helpful when
working with dynamic values or the component helper.
The getDefaultProps method is run during production builds.
This addon calls props validation and default value assignments in the didReceiveAttrs
and init lifecycle hooks. Per the Ember.js docs, if you need to define additional behavior in
these hooks you must call this._super(...arguments):
export default Component.extend({
propTypes: {
someString: PropTypes.string
},
getDefaultProps() {
return {
someString: 'Default Value'
}
},
init() {
this._super(...arguments);
// your component code
},
didReceiveAttrs() {
this._super(...arguments);
// your component code
}
})Although props validation is only run in development builds, this addon must be
included for production builds as well. During production builds the prop-types
library is not imported. Instead a set of shims is imported for the props validators
so that the import statements do not throw errors. Prod weight for the addon is
0.29 KB (0.12 KB gzipped).
The call to PropTypes.checkPropTypes is automatically stripped in production builds
as well using UglifyJS's compress configurations. If you would like to disable this
additional stripping you can configure the addon to skip it in your
ember-cli-build.js configs (Note that even if you disable the code stripping props
validations will still only be run in dev builds).
The getDefaultProps method is run during component init in production builds. If
you would prefer not to enable this method, you can configure the addon to strip it
out:
// ember-cli-build.js
module.exports = function(defaults) {
let app = new EmberApp(defaults, {
emberCliPropTypes: {
compress: false, // Setting to false will disable code stripping
getDefaultProps: false // Setting to false will strip `getDefaultProps` feature
}
});
return app.toTree();
};If you'd like to contribute, please read our contribution guidelines and then get cracking!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent