ember-context
v0.1.0ember-context
React-style context for Ember.
What is it?
If you're tired of passing properties many levels down the component tree, ember-context
may be the answer you've been looking for.
Motivation
React offers a context approach which allows sharing data from ancestor components to descendents without having to pass it directly down the component tree. This addon is an attempt to emulate that behaviour in Ember.
Disclaimer
Context is usually not the best tool for the job, as it has some drawbacks, both stylistically and in terms of efficiency. If you still feel like context is the best solution for your design, then go ahead and use it :wink:
Usage
Usage is very similar to the React usage.
Create a context
Import and invoke ember-context
's createContext
function, passing a default value for the context:
/* contexts/my-context.js */
import createContext from 'ember-context';
export default createContext('some default value');
This will return a tuple of Provider
and Consumer
components, and a ConsumerMixin
mixin to be used with your own components.
Render a provider component
Use the Provider
component returned by the createContext
call. You can do this by adding a provider component to your application and re-exporting your context's Provider
component:
/* components/my-context/provider */
import myContext from '../../contexts/my-context';
export default myContext.Provider;
then rendering that component in your application and optionally passing a value (the default value passed to createContext
will be used otherwise):
{{!-- templates/application.hbs --}}
{{#my-context/provider value="my context's value"}}
...
{{/my-context/provider}}
Consume the context in a child component
There are two possible ways of achieving this - you can either use your context's Consumer
component, or its ConsumerMixin
in one of your own components.
Using the Consumer
component
Similar to rendering the Provider
component, you can add a consumer component to your application and re-export your context's Consumer
component:
/* components/my-context/consumer */
import myContext from '../../contexts/my-context';
export default myContext.Consumer;
then render that component in your application. The consumer component will yield your context's value:
{{!-- templates/application.hbs --}}
{{#my-context/provider value="my context's value"}}
...
{{#my-context/consumer as |context|}}
<span>{{context}}</span>
{{/my-context/consumer}}
...
{{/my-context/provider}}
Using the ConsumerMixin
in your own components
If you'd prefer direct access to your context inside your own components, you can use your context's ConsumerMixin
:
/* components/my-component.js */
import Component from '@ember/component';
import { computed } from '@ember/object';
import myContext from '../contexts/my-context';
export default Component.extend(myContext.ConsumerMixin, {
// component has a `context` property which will be
// automatically populated, which we can use internally.
myValue: computed('context', function() {
return `Context value is '${this.get('context')}'`;
}),
});
You then render your component inside a provider to give it access to the context:
{{!-- templates/application.hbs --}}
{{#my-context/provider value="my context's value"}}
...
{{my-component}}
...
{{/my-context/provider}}
Updating the context's value
You can pass any value
into your context's Provider
component, including variables. Any updates to the context's value will propagate automatically:
/* controllers/application.js */
import Controller from '@ember/controller';
export default Controller.extend({
timesClicked: 0,
actions: {
incrementCounter() {
this.incrementProperty('timesClicked');
},
},
});
{{!-- templates/application.hbs --}}
{{#my-context/provider value=timesClicked}}
<button {{action "incrementCounter"}}>
{{#my-context/consumer as |context|}}
<span>Clicked {{context}} times</span>
{{/my-context/consumer}}
</button>
{{/my-context/provider}}
Installation
ember install ember-context
Contributing
Installation
git clone <repository-url>
cd my-addon
npm install
Linting
npm run lint:hbs
npm run lint:js
npm run lint:js -- --fix
Running tests
ember test
– Runs the test suite on the current Ember versionember test --server
– Runs the test suite in "watch mode"ember try:each
– Runs the test suite against multiple Ember versions
Running the dummy application
ember serve
- Visit the dummy application at http://localhost:4200.
For more information on using ember-cli, visit https://ember-cli.com/.
License
This project is licensed under the MIT License.
Metadata
- MIT
- 6.* || 8.* || >= 10.*
- Andrew Pye
- released 12/12/2018