# ember-prop-types

> This addon provides React-like property management for components.

Latest version **9.0.2** (published 2018-10-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install ember-prop-types
pnpm add ember-prop-types
yarn add ember-prop-types
bun add ember-prop-types
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 9.0.2 |
| Published | 2018-10-11 |
| First published | 2016-03-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 6.0.0 |
| Dependencies | 2 |
| Unpacked size | 40.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 80 |
| Author | Matthew Dahl |
| Maintainers | ciena |
| Keywords | ember-addon |

## Links

- npm: https://www.npmjs.com/package/ember-prop-types
- Repository: https://github.com/ciena-blueplanet/ember-prop-types
- Homepage: https://github.com/ciena-blueplanet/ember-prop-types#readme
- Issues: https://github.com/ciena-blueplanet/ember-prop-types/issues
- npm.io page: https://npm.io/package/ember-prop-types

## Dependencies (2)

- [ember-cli-babel](https://npm.io/package/ember-cli-babel.md) ^6.6.0
- [ember-get-config](https://npm.io/package/ember-get-config.md) ^0.2.4

## Recent versions

- 9.0.2 (latest) — 2018-10-11
- 9.0.0 — 2018-10-04
- 8.0.0 — 2018-09-20
- 7.0.4 — 2018-07-20
- 7.0.3 — 2018-04-26
- 7.0.2 — 2018-03-09
- 7.0.1 — 2018-03-09
- 7.0.0 — 2018-02-19
- 6.0.1 — 2018-01-03
- 6.0.0 — 2018-01-03
- 5.0.3 — 2017-12-27
- 5.0.2 — 2017-11-22
- 5.0.1 — 2017-11-02
- 5.0.0 — 2017-11-02
- 4.1.0 — 2017-10-30
- … 73 more at https://npm.io/package/ember-prop-types/versions

## README

# ember-prop-types

This addon provides
[React-like property management](https://facebook.github.io/react/docs/typechecking-with-proptypes.html) for components.

###### Dependencies

![Ember][ember-img]
[![NPM][npm-img]][npm-url]

###### Health

[![Travis][ci-img]][ci-url]
[![Coveralls][cov-img]][cov-url]

###### Security

[![bitHound][bithound-img]][bithound-url]

## Installation

```bash
ember install ember-prop-types
```

## Usage

**[Full Docs](http://ciena-blueplanet.github.io/ember-prop-types/)**

## Examples

### Better Components

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

```js
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:

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

[bithound-img]: https://www.bithound.io/github/ciena-blueplanet/ember-prop-types/badges/score.svg "bitHound"
[bithound-url]: https://www.bithound.io/github/ciena-blueplanet/ember-prop-types

[ember-img]: https://img.shields.io/badge/ember-1.12.2+-orange.svg "Ember 1.12.2+"

[ci-img]: https://img.shields.io/travis/ciena-blueplanet/ember-prop-types.svg "Travis CI Build Status"
[ci-url]: https://travis-ci.org/ciena-blueplanet/ember-prop-types

[cov-img]: https://img.shields.io/coveralls/ciena-blueplanet/ember-prop-types.svg "Coveralls Code Coverage"
[cov-url]: https://coveralls.io/github/ciena-blueplanet/ember-prop-types

[npm-img]: https://img.shields.io/npm/v/ember-prop-types.svg "NPM Version"
[npm-url]: https://www.npmjs.com/package/ember-prop-types

---
_Source: https://npm.io/package/ember-prop-types · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._