Feature Request: Custom Attributes

I don’t think that this exists even in React as of now. But I found this feature really helpful in making custom functions for my application.

• The basic idea here is that we can pass in a custom attribute to the element that is linked to a global function or local function that defines functionality of the attribute

Example

• <img src="Someting.jpg" />. In case this fails you need to add a onError handler to manage the error state. Moreover these functions needs to be defined throughout the application and adding more functionality in such cases is difficult.
• So the custom attribute will do something like <img source="Someting.jpg" />. The source attribute is technically a function that takes the value and a reference to the element.
• Just custom functionality can be added more easily

In case I was unable to explain it properly Aurelia.JS has it and its pretty useful. https://aurelia.io/docs/templating/custom-attributes#introduction

[Marcisbee]

This feature is in the latest release.

The path I took was

Radi.customAttribute('relative-size', (element, value) => {
  element.style.fontSize = value + 'em';
  return `changed-${value * 100}`;
}, {
  allowedTags: ['li', 'ul'],  // Tags that can have this (default: null -> all tags)
  addToElement: true,         // Should add value/function to DOM node (default: true)
})

This example definition will work like this:

<li relative-size={1.5}></li>

and output this (because addToElement was set):

<li relative-size="changed-150"></li>

[rafaelklaessen]

I think that HOCs are already working with Radi since they aren’t really React-specific.