Custom attributes in React

Posted by

If like me you need to have attributes that are not part of the HTML5 spec, and in turn are validated by React as invalid, resulting in them being omitted, then look no further.

There is a simple way of adding any attribute you deem required. react-dom gives you a handy way of injecting the attributes you need. In the example below I needed a few attributes that are used in an email template to ensure compatibility across clients:

const { DOMProperty } = require('react-dom/lib/ReactInjection');

DOMProperty.injectDOMPropertyConfig({
  Properties: {
    valign: DOMProperty.MUST_USE_ATTRIBUTE,
    align: DOMProperty.MUST_USE_ATTRIBUTE,
    border: DOMProperty.MUST_USE_ATTRIBUTE,
    bgcolor: DOMProperty.MUST_USE_ATTRIBUTE
  }
});

In the above I am injecting valign, align, border and bgcolor into React to stop it from validating the HTML and returning errors. If you run this more than once it will result in duplicate errors.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s