Skip to content

Instantly share code, notes, and snippets.

@arielsalminen
Created March 21, 2020 11:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save arielsalminen/2f0a591404c571223706045d9a9274c4 to your computer and use it in GitHub Desktop.
Save arielsalminen/2f0a591404c571223706045d9a9274c4 to your computer and use it in GitHub Desktop.
/**
* This function binds properties and events to a custom element and returns the event.
* It can be used in the react "ref" attribute like this:
* ```<custom-element ref={ duetRef({ prop1: 'a' }, { event: () => this.handleEvent() }) }></custom-element>```
* The above example is a *one time binding* for properties and will not update automatically.
* If you need updates on properties you'll have to save element references and update them manually:
* ```<custom-element ref={ el => { this.element = duetRef({ prop1: 'a' }, { event: () => this.handleEvent() })(el); }></custom-element>```
* using this reference you can update prop1: ```this.element.prop1 = 'b';```.
*
* @param {*} properties The properties to bind to a custom element.
* @param {*} events The event listeners to bind to a custom element.
*/
export default function duetRef(properties, events) {
return el => {
if (el) {
for (const key of Object.keys(properties)) {
el[key] = properties[key]
}
for (const event of Object.keys(events)) {
el.addEventListener(event, events[event])
}
}
return el
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment