Skip to content
Proof of concept code that turns a React component into a jQuery plugin.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
src
.gitignore
LICENSE
README.md
index.html
package.json
webpack.config.js

README.md

React components as jQuery plugins

Did you know, you can use React without rewriting your whole app?

You can turn React components into jQuery plugins. Then you can use them with just a few jQuery incantations:

// src/integrate.js
$(".container .counter").clickCounter();

$(".btn-10x").click(function () {
    $(".container .counter")
        .clickCounter()[0]
        .val(10);
});

$(".btn-get").click(function () {
    var val = $(".container .counter")
            .clickCounter()[0]
            .val();

    alert("Current counter value is: "+val);
});

React -> jQuery wrapper

All you have to do is wrap them like this:

// src/main.jsx
if (typeof jQuery !== 'undefined') {
    (function ($) {
        var pluginName = "clickCounter",
            defaults = {
                value: 0
            };

        function Plugin(element, options) {
            this.element = element;
            this.settings = $.extend({}, defaults, options);
            this._defaults = defaults;
            this._name = pluginName;
            this.init();
        }

        $.extend(Plugin.prototype, {
            init: function () {
                this.component = React.render(
                        ,
                    this.element
                );
                return this;
            },

            val: function (val) {
                if (!arguments.length) {
                    return this.component.state.counter;
                }else{
                    this.settings.value = val;
                    this.init();
                }
            }
        });

        $.fn[pluginName] = function (options) {
            return this.map(function () {
                if (!$.data(this, 'plugin_'+pluginName)) {
                    $.data(this, 'plugin_'+pluginName, new Plugin(this, options));
                }
                return $.data(this, 'plugin_'+pluginName);
            });
        };
    })(jQuery);
}

Then use Webpack to compile them into normal JavaScript code.

You can’t perform that action at this time.