# ember-spread

> Dynamic options for dynamic components

Latest version **7.0.2** (published 2020-04-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install ember-spread
pnpm add ember-spread
yarn add ember-spread
bun add ember-spread
```

## 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 | 7.0.2 |
| Published | 2020-04-02 |
| First published | 2016-11-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 6.0.0 |
| Dependencies | 2 |
| Unpacked size | 21.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 30 |
| Author | Steven Glanzer |
| Maintainers | ciena |
| Keywords | ember-addon |

## Links

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

## Dependencies (2)

- [ember-cli-babel](https://npm.io/package/ember-cli-babel.md) ^6.6.0
- [ember-prop-types](https://npm.io/package/ember-prop-types.md) ^9.0.2

## Recent versions

- 7.0.2 (latest) — 2020-04-02
- 7.0.1 — 2018-10-12
- 7.0.0 — 2018-10-04
- 6.0.1 — 2018-09-21
- 6.0.0 — 2018-09-20
- 5.1.0 — 2018-08-01
- 5.0.2 — 2018-07-20
- 5.0.1 — 2018-04-25
- 5.0.0 — 2018-03-09
- 4.0.1 — 2018-01-03
- 4.0.0 — 2018-01-03
- 3.1.5 — 2018-01-03
- 3.0.3 — 2018-01-03
- 3.0.2 — 2018-01-03
- 3.0.1 — 2017-11-09
- … 21 more at https://npm.io/package/ember-spread/versions

## README

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

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

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

[ember-observer-badge]: http://emberobserver.com/badges/ember-spread.svg "Ember Observer score"
[ember-observer-badge-url]: http://emberobserver.com/addons/ember-spread

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

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

# ember-spread

Dynamic options for dynamic 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]

###### Ember Observer score
[![EmberObserver][ember-observer-badge]][ember-observer-badge-url]

## Installation
```
ember install ember-spread
```

## Details

A mixin that can be used to [`spread`](https://sebmarkbage.github.io/ecmascript-rest-spread/) a property object
against the top level of a component.  Spread allows a component helper to be used without knowing the properties
the target component will require.

E.g.

```
{{component fooComponent
  options=fooOptions
}}
```

Those options are then flattened onto the target component and observed as normal attributes on the component.
So if `fooComponent` was `my-button` and `fooOptions` was { biz: 'baz' } the above would be the equivalent of:

```
{{my-button
  biz='baz'
}}
```

Data-driven scenarios will find this particularly useful, since both the component and properties can be retrieved
from an external API

## Installation

* `ember install ember-spread`

## Demo

http://ciena-blueplanet.github.io/ember-spread/

## Usage

Component
```
import SpreadMixin from 'ember-spread'

export default Ember.Component.extend(SpreadMixin, {
  ...
})
```

Template instance
```
{{component-foo
  options=bar
}}
```

* The spread function operates based on the init lifecycle hook, so be sure to call `this._super(...arguments)` if
  your component also uses that hook
* Spread only acts on an object hash (the `hash` helper can be used)
* `options` is the default property that will be spread
* If you need to customize the target property you can set the target using the `spreadOptions` property, i.e.

```
{{component-foo
  baz=bar
  spreadOptions=(hash
    property='baz'
  )
}}
```

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