Skip to content

Instantly share code, notes, and snippets.

@tungd

tungd/react-helper.js

Last active November 30, 2018 06:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tungd/8282155 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tungd/8282155 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. tungd revised this gist Apr 29, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion react-helper.js
    View file
    Original file line number Diff line number Diff line change
    @@ -14,7 +14,7 @@

    !function(window, React) {

    var DOMReady = false, registry = {}, queue = [];
    var domReady = false, registry = {}, queue = [];

    window.ReactHelper = {

  2. tungd revised this gist Jan 11, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion react-helper.js
    View file
    Original file line number Diff line number Diff line change
    @@ -37,7 +37,7 @@
    },

    initComponent: function(name) {
    var selector =
    var props, selector =
    '[react-component="'+name+'"],[data-react-component="'+name+'"]';

    document.querySelectorAll(selector).forEach(function(node) {
  3. tungd revised this gist Jan 11, 2014. 1 changed file with 2 additions and 4 deletions.
    6 changes: 2 additions & 4 deletions react-helper.js
    View file
    Original file line number Diff line number Diff line change
    @@ -33,9 +33,7 @@
    registry[name] = constructor;
    queue.push(name);

    if (domReady) {
    this.initComponents();
    }
    if (domReady) this.initComponents();
    },

    initComponent: function(name) {
    @@ -44,7 +42,7 @@

    document.querySelectorAll(selector).forEach(function(node) {
    props = node.getAttribute('react-props') ||
    node.dataset['reactProps'] || 'null';
    node.getAttribute('data-react-props') || 'null';

    React.renderComponent(registry[name](JSON.parse(props)), node);
    })
  4. tungd revised this gist Jan 11, 2014. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions react-helper.js
    View file
    Original file line number Diff line number Diff line change
    @@ -46,14 +46,14 @@
    props = node.getAttribute('react-props') ||
    node.dataset['reactProps'] || 'null';

    React.renderComponent(registry[name](JSON.parse(props)), node)
    React.renderComponent(registry[name](JSON.parse(props)), node);
    })
    }
    }
    };

    window.addEventListener('DOMContentLoaded', function() {
    domReady = true;
    ReactHelper.initComponents();
    })
    });

    }(window, window.React);
  5. tungd revised this gist Jan 11, 2014. 1 changed file with 31 additions and 14 deletions.
    45 changes: 31 additions & 14 deletions react-helper.js
    View file
    Original file line number Diff line number Diff line change
    @@ -14,29 +14,46 @@

    !function(window, React) {

    var registry = {}
    var DOMReady = false, registry = {}, queue = [];

    window.ReactHelper = {
    register: function(name, constructor) {
    registry[name] = constructor
    },

    initComponents: function() {
    var i, name, props, selector, names = Object.keys(registry)
    for (var i = 0; i < queue.length; i += 1) {
    this.initComponent(queue[i])
    }
    },

    for (i = 0; i < names.length; i += 1) {
    name = names[i]
    selector = '[react-component="'+name+'"],[data-react-component="'+name+'"]'
    forceInitComponents: function() {
    queue = queue.concat(Object.keys(registry));
    this.initComponents();
    },

    document.querySelectorAll(selector).forEach(function(node) {
    props = node.getAttribute('react-props') ||
    node.dataset['reactProps'] || 'null'
    register: function(name, constructor) {
    registry[name] = constructor;
    queue.push(name);

    React.renderComponent(registry[name](JSON.parse(props)), node)
    })
    if (domReady) {
    this.initComponents();
    }
    },

    initComponent: function(name) {
    var selector =
    '[react-component="'+name+'"],[data-react-component="'+name+'"]';

    document.querySelectorAll(selector).forEach(function(node) {
    props = node.getAttribute('react-props') ||
    node.dataset['reactProps'] || 'null';

    React.renderComponent(registry[name](JSON.parse(props)), node)
    })
    }
    }

    window.addEventListener('DOMContentLoaded', window.ReactHelper.initComponents)
    window.addEventListener('DOMContentLoaded', function() {
    domReady = true;
    ReactHelper.initComponents();
    })

    }(window, window.React);
  6. tungd created this gist Jan 6, 2014.
    42 changes: 42 additions & 0 deletions react-helper.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,42 @@
    /**
    * react-helper.js
    *
    * Helper for Facebook's React UI Library. Add support for declare
    * component on DOM (similar to AngularJS Directive).
    *
    * Usage:
    * - Register a component:
    * ReactHelper.register('MyComponent', MyComponent)
    * - Declare the DOM node:
    * <div react-component="MyComponent" react-props="{'name':'value'}"
    * - There is no step 3!
    */

    !function(window, React) {

    var registry = {}

    window.ReactHelper = {
    register: function(name, constructor) {
    registry[name] = constructor
    },
    initComponents: function() {
    var i, name, props, selector, names = Object.keys(registry)

    for (i = 0; i < names.length; i += 1) {
    name = names[i]
    selector = '[react-component="'+name+'"],[data-react-component="'+name+'"]'

    document.querySelectorAll(selector).forEach(function(node) {
    props = node.getAttribute('react-props') ||
    node.dataset['reactProps'] || 'null'

    React.renderComponent(registry[name](JSON.parse(props)), node)
    })
    }
    }
    }

    window.addEventListener('DOMContentLoaded', window.ReactHelper.initComponents)

    }(window, window.React);