How to use the react-tools/build/modules/React.DOM function in react-tools

To help you get started, we’ve selected a few react-tools examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github andreypopp / markstruct / blocks / line.jsx View on Github external
render: function() {
    return this.transferPropsTo(React.DOM.div({tabIndex: "0"}, "***"));
  }
});
github andreypopp / markstruct / editors / rich.js View on Github external
render: function() {
    var content = this.renderAnnotatedContent();
    return this.transferPropsTo(
      React.DOM.div({
        contentEditable: "true",
        className: "Editor",
        onSelect: this.onSelect,
        onKeyDown: this.onKeyDown,
        dangerouslySetInnerHTML: {__html: content}
      }));
  }
});
github andreypopp / react-app / asset-injector.js View on Github external
"use strict";

var React = require('react-tools/build/modules/React'),
    head = React.DOM.head;

React.DOM.head = React.createClass({
  render: function() {
    var children = [].concat(__styles, __scripts, this.props.children);
    return head({}, children);
  }
});

var __styles = [];
var __scripts = [];

var AssetInjector = {
  addStylesheet: function(href, key) {
    __styles.push(React.DOM.link({rel: 'stylesheet', href: href, key: key}));
  },
  addScript: function(src, key) {
    __scripts.push(React.DOM.script({src: src, key: key + 100000}));
  },
github andreypopp / markstruct / editors / preformatted.js View on Github external
render: function() {
    return this.transferPropsTo(
      React.DOM.pre({
        contentEditable: "true",
        onKeyDown: this.onKeyDown,
        className: "Editor",
        dangerouslySetInnerHTML: {__html: this.props.content}
      }));
  },
github andreypopp / markstruct / editable.jsx View on Github external
}));
  }
});

var Editable = React.createClass({
  mixins: [EditableMixin],
  component: React.DOM.div,

  computeLineMetrics: function() {
    return utils.computeLineMetrics(this.getDOMNode());
  }
});

var EditablePreformatted = React.createClass({
  mixins: [EditableMixin],
  component: React.DOM.pre,

  computeLineMetrics: function() {
    return utils.computeLineMetricsPre(this.getDOMNode());
  },

  onKeyDown: function(e) {
    if (keys.match(e, keys.ENTER)) {
      e.preventDefault();
      insertNewLine(this.getDOMNode());
    } else if (keys.match(e, keys.TAB)) {
      e.preventDefault();
      insertString(this.getDOMNode(), this.props.tabAs || '  ');
    } else if (this.props.onKeyDown(e)) {
      this.props.onKeyDown(e);
    }
  }
github andreypopp / react-app / asset-injector.js View on Github external
addStylesheet: function(href, key) {
    __styles.push(React.DOM.link({rel: 'stylesheet', href: href, key: key}));
  },
  addScript: function(src, key) {
github andreypopp / markstruct / editable.jsx View on Github external
render: function() {
    var component = this.component || React.DOM.div;
    return this.transferPropsTo(
      component({
        contentEditable: "true",
        onKeyDown: this.onKeyDown || this.props.onKeyDown,
        className: "Editable",
        dangerouslySetInnerHTML: {__html: this.props.block.content}
      }));
  }
});
github andreypopp / markstruct / blocks / image.jsx View on Github external
render: function() {
    return this.transferPropsTo(React.DOM.img({tabIndex: "0"}));
  }
});
github andreypopp / react-app / asset-injector.js View on Github external
"use strict";

var React = require('react-tools/build/modules/React'),
    head = React.DOM.head;

React.DOM.head = React.createClass({
  render: function() {
    var children = [].concat(__styles, __scripts, this.props.children);
    return head({}, children);
  }
});

var __styles = [];
var __scripts = [];

var AssetInjector = {
  addStylesheet: function(href, key) {
    __styles.push(React.DOM.link({rel: 'stylesheet', href: href, key: key}));
  },
  addScript: function(src, key) {