Merge pull request #234 from shakacode/return-react-element

Make ReactOnRails.render return a reference to the component's backing instance

README.md

@@ -364,7 +364,7 @@ If you are using [react-rails](https://github.com/reactjs/react-rails) in your p
 
 - Remove the 'react-rails' gem from your Gemfile.
 
-- Remove the generated generated lines for react-rails in your application.js file. 
+- Remove the generated generated lines for react-rails in your application.js file.
 
 ```
 //= require react
@@ -386,6 +386,7 @@ Note: If you have components from react-rails you want to use, then you will nee
 + [React Router](docs/additional_reading/react_router.md)
 + [RSpec Configuration](docs/additional_reading/rspec_configuration.md)
 + [Server Rendering Tips](docs/additional_reading/server_rendering_tips.md)
++ [Rails View Rendering from Inline JavaScript](docs/additional_reading/rails_view_rendering_from_inline_javascript.md)
 + [Tips](docs/additional_reading/tips.md)
 + [Tutorial for v2.0](docs/tutorial-v2.md), deployed [here](https://shakacode-react-on-rails.herokuapp.com/).
 + [Turbolinks](docs/additional_reading/turbolinks.md)

docs/additional_reading/rails_view_rendering_from_inline_javascript.md

@@ -0,0 +1,35 @@
+# Using ReactOnRails in JavaScript
+You can easily render React components in your JavaScript with `render` method that returns a [reference to the component](https://facebook.github.io/react/docs/more-about-refs.html) (virtual DOM element).
+
+```js
+/**
+ * ReactOnRails.render("HelloWorldApp", {name: "Stranger"}, 'app');
+ *
+ * Does this:
+ *   ReactDOM.render(React.createElement(HelloWorldApp, {name: "Stranger"}),
+ *     document.getElementById('app'))
+ *
+ * @param name Name of your registered component
+ * @param props Props to pass to your component
+ * @param domNodeId
+ * @returns {virtualDomElement} Reference to your component's backing instance
+ */
+ReactOnRails.render(componentName, props, elementId)
+```
+
+## Why do we need this?
+Imagine that we have some event with jQuery, it allows us to set component state manually.
+
+```html
+<input id="input" type="range" min="0" max="100" />
+<div id="root"></div>
+
+<script>
+  var input = $("#input");
+  var component = ReactOnRails.render("componentName", { value: input.val() }, "root");
+
+  input.on("change", function(e) {
+    component.setState({ value: input.val() });
+  });
+</script>
+```

node_package/src/ReactOnRails.js

@@ -29,10 +29,11 @@ ctx.ReactOnRails = {
    * @param name Name of your registered component
    * @param props Props to pass to your component
    * @param domNodeId
+   * @returns {virtualDomElement} Reference to your component's backing instance
    */
   render(name, props, domNodeId) {
     const reactElement = createReactElement({ name, props, domNodeId });
-    ReactDOM.render(reactElement, document.getElementById(domNodeId));
+    return ReactDOM.render(reactElement, document.getElementById(domNodeId));
   },
 
   /**

node_package/tests/ReactOnRails.test.js

@@ -0,0 +1,26 @@
+/* eslint-disable react/no-multi-comp */
+import test from 'tape';
+import React from 'react';
+import ReactOnRails from '../src/ReactOnRails';
+import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
+import JsDom from 'jsdom';
+
+if (!canUseDOM) {
+  global.document = JsDom.jsdom('<div id="root"></div>');
+  global.window = document.defaultView;
+}
+
+test('ReactOnRails render returns a virtual DOM element for component', (assert) => {
+  assert.plan(1);
+  const R1 = React.createClass({
+    render() {
+      return (
+        <div> WORLD </div>
+      );
+    },
+  });
+  ReactOnRails.register({ R1 });
+  const actual = ReactOnRails.render('R1', {}, 'root')._reactInternalInstance._currentElement.type;
+  assert.deepEqual(actual, R1,
+    'ReactOnRails render should return a virtual DOM element for component');
+});

package.json

@@ -34,7 +34,8 @@
     "react-transform-hmr": "^1.0.1",
     "tap-spec": "^4.1.1",
     "tape": "^4.4.0",
-    "webpack": "^1.12.12"
+    "webpack": "^1.12.12",
+    "jsdom": "^8.0.0-0"
   },
   "peerDependencies": {
     "react": ">= 0.14",