Component(having non standard html attributes)

Component(having non-standard HTML attributes)

There are many components like Tab component which falls under this category. There are many techniques to add non-standard attributes to HTML in React. I will be discussing here the technique that I have used in some react components.

NOTE: React automatically ignores non-standard HTML attributes, so we need to find use some hack to add them.

Many components in dialogs like tab needs attributes like selected, visuallySelected which React doesn't recongnize. They are important for platform CSS. To make our react/html component look like XUL, we need these attributes.

Here's a short code that shows the hack to add/update attributes in an simple example -

// Suppose we want a div to have some custom attributes, normally react wouldn't allow custom attributes
// so this is a hack to att as much custom attributes to your component as you want

class Div extends React.Component {

  componentDidMount() {
    this.addAttributes();
  }

  componentWillReceiveProps(nextProps) {
    this.addAttributes();
  }

  addAttributes() {
    this.props.attributes.forEach(attr => (this.button.setAttribute(attr.name, attr.value)));
  }
  
  render() {
    const {className, id} = this.props;
    return (
      <div className={className} id={id}>
        {this.props.content}
      </div>
    );
  }
}


// Now use Div component

const attributesObject = {
  customAttr1: "attr1",
  customAttr2: "attr2"
};

<Div attributes={attributesObject} className="mydiv" id="someid" content="This is div body content"/>

For actual code and usuage, checkout Tab Component.