This addon provides React-like property management for components.

ember install ember-prop-types

Full Docs

Below is an example of a component that uses the property mixin provided by this addon:

import Ember from 'ember'
import {PropTypes} from 'ember-prop-types'

export default Ember.Component.extend({
  propTypes: {
    foo: PropTypes.string,
    bar: PropTypes.number.isRequired,
    baz: PropTypes.oneOfType([
      PropTypes.bool,
      PropTypes.string
    ])
  },

  getDefaultProps () {
    return {
      foo: 'This is going to be highly profitable'
    }
  }
})

If this mixin is being used in a class other than Component, it will need to be mixed into the class:

import Ember from 'ember'
import PropTypeMixin, {PropTypes} from 'ember-prop-types'

export default Ember.ClassName.extend(PropTypeMixin, {
  propTypes: {
    foo: PropTypes.string,
    bar: PropTypes.number.isRequired,
    baz: PropTypes.oneOfType([
      PropTypes.bool,
      PropTypes.string
    ])
  },

  getDefaultProps () {
    return {
      foo: 'This is going to be highly profitable'
    }
  }
})

The idea of propTypes comes from the world of React and is implemented to have an almost identical API in the Ember world. Below is a list of possible propTypes to validate against.

• any
• array
• arrayOf
• bool
• date
• element
• EmberObject
• func
• instanceOf
• null
• number
• object
• oneOf
• oneOfType
• regexp
• shape
• string
• symbol

In Ember you can set default property values on a component class itself but sometimes this bites you when you end up with a property containing an array of selected items or a state object, where all instances of the component end up sharing that same array or object. Uncovering this issue is not always an easy task and so getDefaultProps was also implemented (thanks to the React team for this concept as well).