Skip to content

Instantly share code, notes, and snippets.

Last active Dec 11, 2018
What would you like to do?
Lightning Value Provider
<aura:application >
<!-- Value Providers -->
<c:XYZ context="{!this}" />
<c:valueProvider context="{!this}" name="X" values="{Y: 'y', Z:'z'}" />
<!-- Events -->
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<!-- Markup -->
<!-- Note: this is how simple you can use the values in the markup -->
<br />
doInit: function(cmp, evt, hlp) {
// Note: this is how simple you use it in your context component (or app)
// Note: this is how you could also see the markup value provider.
<aura:component extensible="true" >
<aura:attribute name="name" type="String" required="true" />
<aura:attribute name="values" type="Map" required="true" />
<aura:attribute name="context" type="Map" required="true"/>
<!-- Events -->
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
doInit: function(cmp, evt, hlp) {
const providerName = cmp.get("");
const values = cmp.get("v.values");
// Note: add the markup porvider to the context component
cmp.get("v.context").addValueProvider(providerName, {
get: (key) => values[key]
// Note: add the javascript provider to the window
Object.defineProperty(window, providerName, {
writable: true,
value: values
<aura:component extends="c:valueProvider">
<aura:set attribute="name" value="XYZ" />
<aura:set attribute="values" value="{FOO:'Foo', BAR: 'Bar'}" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment