React-any-attr NPM

react-any-attr

From time to time you might have the need to add a custom attribute to an HTML element and React won't let you. It is not very common situation, but when it presents itself you must do things not the REACT WAY. This is the purpose of this package. it assists adding any attribute to any HTML element in React environment. The package provides a component called AnyAttribute that wraps any HTML elements you wish to add any attribute to.

Installation

$ npm install react-any-attr

Usage

import AnyAttribute, { asObject, asString } from 'react-any-attr';

The component receives one property called attributes. This property defines the attributes to add to any HTML element it wraps directly. The component also provides two helper functions called asObject and asString.

asString

Adds anything to an element converted to string. The attribute will be added to the "outerHTML" of the element and will be visible in the developer tools. note that any attribute name will convert to lowercase.

asObject

Adds anything to an element without any convertions. The attribute will not be added to the "outerHTML" of the element and will not be visible in the inspect. note that these attributes will keep their camelCase format.

You can avoid using the asObject and asString functions at all. Just be aware of the implications.

Example

<AnyAttribute
    attributes={{
        objectTimestamp: asObject((new Date()).valueOf()),
        stringTimestamp: asString((new Date()).valueOf()),
        objectAsString : asString({data: myDataObject}),
        objectAsObject : asObject({data: myDataObject}),
        objectAsIs: myDataObject,
        anythingElse: 'Hello darkness my old friend...'
    }}>
    <input id={"input"} />
</AnyAttribute>

The result

Note that any attribute set with asObject are not visible, and any attribute set with asString are visible and the attribute name is in lowercase.

<input id="input" stringtimestamp="158970528706" objectasstring="{"data":{"name":"Your Name", "age": 120, "pet": "cat"}}" objectasis="[object Object]" anythingelse="Hello darkness my old friend...">