Improved property management for Ember apps and addons.
Latest commit a516ca4 Oct 11, 2018
Permalink
Failed to load latest commit information.
.github Replace PullApprove with GitHub Code Owners Mar 16, 2018
.travis Update PUBLISH_NODE_VERSION Oct 10, 2018
addon-test-support handler Ember.Logger deprecation & add CI build ember 3.3 with ember-try Aug 20, 2018
addon Run es5 getter codemod Oct 3, 2018
app Address lint errors and warnings Jan 5, 2017
config add ember 3.3 config for ember-try Sep 17, 2018
coverage add coverage dir Mar 10, 2016
tests fix lint Sep 20, 2018
vendor initial commit Mar 9, 2016
.bowerrc initial commit Mar 9, 2016
.editorconfig initial commit Mar 9, 2016
.ember-cli initial commit Mar 9, 2016
.eslintignore fix upgrade code review comments Jul 7, 2017
.eslintrc.js handler Ember.Logger deprecation & add CI build ember 3.3 with ember-try Aug 20, 2018
.gitignore remove ignoring of package-lock file Mar 8, 2018
.npmignore Revert "Merge pull request #143 from juwara0/upgradeEmberCli_2-15-1" Nov 2, 2017
.pr-bumper.json update pr-bumper to version 3, node 8 and slack integration Mar 8, 2018
.remarkignore fix linting errors Nov 22, 2017
.travis.yml Fix travis npm deploy Oct 11, 2018
.watchmanconfig initial commit Mar 9, 2016
CHANGELOG.md [pr-bumper] Automated version bump to 9.0.2 Oct 11, 2018
LICENSE.md fix linting errors Nov 22, 2017
README.md fix linting errors Nov 22, 2017
dependency-snapshot.json [pr-bumper] Automated version bump Apr 3, 2017
ember-cli-build.js no prism bower or shims Oct 2, 2018
index.js upgrade ember-cli to 2.12.3 Jun 26, 2017
package-lock.json [pr-bumper] Automated version bump to 9.0.2 Oct 11, 2018
package.json [pr-bumper] Automated version bump to 9.0.2 Oct 11, 2018
testem.js Remove reporter Oct 5, 2018

README.md

ember-prop-types

This addon provides React-like property management for components.

Dependencies

Ember NPM

Health

Travis Coveralls

Security

bitHound

Installation

ember install ember-prop-types

Usage

Full Docs

Examples

Better Components

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'
    }
  }
})

Property Validation

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

Default Property Values

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).