InlineStyleToObject method is parsing attribute values to lower case

[adrianos10]

Hi,

I have found a problem within InlineStyleToObject method. It's parsing both attribute and value to lower case which can be problematic in case when someone is passing background-image style with URL or path to file as a value. As image file can contain uppercase letters, when parsed to lower case it causes 404 error.

[cj-clifton]

Also finding this when trying to pass in a Link for react-router. The <Link> tag in my string is converted to <link> and so doesn't work. Any solution?

[farhanjiwani]

also className becomes classname which throws warnings

[jacksonkr]

I'm stuck on this as well because my custom components have Camel case naming. Looking into babel.transform as another possible option

EDIT

I'm finding out that dangerouslySetInnerHTML will also reduce tags to lower case. In html there are no camel-case tags so this all makes sense. This must be used dangerouslySetInnerHTML and therefore were are stuck to find a different solution.

[adrianos10]

My PR seems to resolve this issue but I think that this library is dead. I switched to html-react-parser in my project as it’s a much lighter solution with similar API and it’s working well.

[jacksonkr]

@adrianos10 thanks for the note. I'm using their "replace" to hack a way to sub in a react component for some html components.

[tomswork]

Hey guys - I've found a hacky way of getting around this by using React.cloneElement

Clone the element created by convertNodeToElement and add in the attributes that are required.

EG.

const convertedEl = convertNodeToElement(node, index, transform);
const finalEl = React.cloneElement(convertedEl, {style: {backgroundColor: 'red'}});
return finalEl;