react-data-attributes-mixin

react-data-attributes-mixin

Take data from props and convert it to HTML data-* attributes

Example

var DataAttributesMixin = require('react-data-attributes-mixin');

var Example = React.createClass({

  mixins: [DataAttributesMixin],
  
  propTypes: {
    data: React.PropTypes.object
  },
  
  getDefaultProps: function() {
    return {
      data: {
        type: 'button',
        location: 'web app',
        fooBar: 'baz'
      }
    };
  },

  render: function() {
    var dataAttributes = this.getDataAttributesFromProps();
    return (
      <button {...dataAttributes} />
    );
  }
  
});

Output

<button data-type="button" data-location="web app" data-foo-bar="baz"></button>