Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
app
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

Improved property management for Ember apps and addons.

Resources

License

Packages

No packages published

Languages