How to use react-dom-core - 7 common examples

// custom attributes (`data-` and `aria-`)
    if (isCustomAttribute(propertyName)) {
      props[propertyName] = propertyValue;
      continue;
    }

    // make HTML DOM attribute/property consistent with React attribute/property
    reactProperty = config.html[propertyName.toLowerCase()];
    if (reactProperty) {
      if (
        Object.prototype.hasOwnProperty.call(
          DOMProperty.properties,
          reactProperty
        ) &&
        DOMProperty.properties[reactProperty].hasBooleanValue
      ) {
        props[reactProperty] = true;
      } else {
        props[reactProperty] = propertyValue;
      }
      continue;
    }

    // make SVG DOM attribute/property consistent with React attribute/property
    reactProperty = config.svg[propertyName];
    if (reactProperty) {
      props[reactProperty] = propertyValue;
    } else if (utilities.PRESERVE_CUSTOM_ATTRIBUTES) {
      props[propertyName] = propertyValue;
    }
  }

for (propertyName in attributes) {
    propertyValue = attributes[propertyName];

    // custom attributes (`data-` and `aria-`)
    if (isCustomAttribute(propertyName)) {
      props[propertyName] = propertyValue;
      continue;
    }

    // make HTML DOM attribute/property consistent with React attribute/property
    reactProperty = config.html[propertyName.toLowerCase()];
    if (reactProperty) {
      if (
        Object.prototype.hasOwnProperty.call(
          DOMProperty.properties,
          reactProperty
        ) &&
        DOMProperty.properties[reactProperty].hasBooleanValue
      ) {
        props[reactProperty] = true;
      } else {
        props[reactProperty] = propertyValue;
      }
      continue;
    }

    // make SVG DOM attribute/property consistent with React attribute/property
    reactProperty = config.svg[propertyName];
    if (reactProperty) {
      props[reactProperty] = propertyValue;
    } else if (utilities.PRESERVE_CUSTOM_ATTRIBUTES) {

var config = {
    html: {},
    svg: {}
};

var propertyName;

/**
 * HTML DOM property config.
 * https://github.com/facebook/react/blob/master/src/renderers/dom/shared/HTMLDOMPropertyConfig.js
 */

// first map out the HTML attribute names
// e.g., { className: 'class' } => { 'class': 'className' }
config.html = utilities.invertObject(
    HTMLDOMPropertyConfig.DOMAttributeNames
);

// then map out the rest of the HTML properties
// e.g., { readOnly: 0 } => { readonly: 'readOnly' }
for (propertyName in HTMLDOMPropertyConfig.Properties) {
    // lowercase to make matching property names easier
    config.html[propertyName.toLowerCase()] = propertyName;
}

/**
 * SVG DOM property config.
 * https://github.com/facebook/react/blob/master/src/renderers/dom/shared/SVGDOMPropertyConfig.js
 */

// first map out the SVG attribute names
// e.g., { fontSize: 'font-size' } => { 'font-size': 'fontSize' }

var propertyName;

/**
 * HTML DOM property config.
 * https://github.com/facebook/react/blob/master/src/renderers/dom/shared/HTMLDOMPropertyConfig.js
 */

// first map out the HTML attribute names
// e.g., { className: 'class' } => { 'class': 'className' }
config.html = utilities.invertObject(
    HTMLDOMPropertyConfig.DOMAttributeNames
);

// then map out the rest of the HTML properties
// e.g., { readOnly: 0 } => { readonly: 'readOnly' }
for (propertyName in HTMLDOMPropertyConfig.Properties) {
    // lowercase to make matching property names easier
    config.html[propertyName.toLowerCase()] = propertyName;
}

/**
 * SVG DOM property config.
 * https://github.com/facebook/react/blob/master/src/renderers/dom/shared/SVGDOMPropertyConfig.js
 */

// first map out the SVG attribute names
// e.g., { fontSize: 'font-size' } => { 'font-size': 'fontSize' }
config.svg = utilities.invertObject(
    SVGDOMPropertyConfig.DOMAttributeNames
);

// then map out the rest of the SVG properties

// then map out the rest of the HTML properties
// e.g., { readOnly: 0 } => { readonly: 'readOnly' }
for (propertyName in HTMLDOMPropertyConfig.Properties) {
    // lowercase to make matching property names easier
    config.html[propertyName.toLowerCase()] = propertyName;
}

/**
 * SVG DOM property config.
 * https://github.com/facebook/react/blob/master/src/renderers/dom/shared/SVGDOMPropertyConfig.js
 */

// first map out the SVG attribute names
// e.g., { fontSize: 'font-size' } => { 'font-size': 'fontSize' }
config.svg = utilities.invertObject(
    SVGDOMPropertyConfig.DOMAttributeNames
);

// then map out the rest of the SVG properties
// e.g., { fillRule: 0 } => { fillRule: 'fillRule' }
for (propertyName in SVGDOMPropertyConfig.Properties) {
    // do not lowercase as some svg properties are camel cased
    config.html[propertyName] = propertyName;
}

/**
 * Export property configs.
 */
module.exports = {
    config: config,
    HTMLDOMPropertyConfig: HTMLDOMPropertyConfig,
    SVGDOMPropertyConfig: SVGDOMPropertyConfig

}

/**
 * SVG DOM property config.
 * https://github.com/facebook/react/blob/master/src/renderers/dom/shared/SVGDOMPropertyConfig.js
 */

// first map out the SVG attribute names
// e.g., { fontSize: 'font-size' } => { 'font-size': 'fontSize' }
config.svg = utilities.invertObject(
    SVGDOMPropertyConfig.DOMAttributeNames
);

// then map out the rest of the SVG properties
// e.g., { fillRule: 0 } => { fillRule: 'fillRule' }
for (propertyName in SVGDOMPropertyConfig.Properties) {
    // do not lowercase as some svg properties are camel cased
    config.html[propertyName] = propertyName;
}

/**
 * Export property configs.
 */
module.exports = {
    config: config,
    HTMLDOMPropertyConfig: HTMLDOMPropertyConfig,
    SVGDOMPropertyConfig: SVGDOMPropertyConfig
};

var DOMProperty = require('react-dom-core/lib/DOMProperty');
var propertyConfig = require('./property-config');
var styleToObject = require('style-to-object');
var utilities = require('./utilities');
var camelCase = utilities.camelCase;

var config = propertyConfig.config;
var isCustomAttribute = propertyConfig.HTMLDOMPropertyConfig.isCustomAttribute;
DOMProperty.injection.injectDOMPropertyConfig(
  propertyConfig.HTMLDOMPropertyConfig
);

/**
 * Makes attributes compatible with React props.
 *
 * @param  {Object} [attributes={}] - The attributes.
 * @return {Object}                 - The props.
 */
function attributesToProps(attributes) {
  attributes = attributes || {};
  var props = {};
  var propertyName;
  var propertyValue;
  var reactProperty;