diff --git a/react_ujs/index.js b/react_ujs/index.js index 9f56d2b17..0ef70a5a3 100644 --- a/react_ujs/index.js +++ b/react_ujs/index.js @@ -6,6 +6,8 @@ var detectEvents = require("./src/events/detect") var constructorFromGlobal = require("./src/getConstructor/fromGlobal") var constructorFromRequireContextWithGlobalFallback = require("./src/getConstructor/fromRequireContextWithGlobalFallback") +var renderWithReactDOM = require("./src/renderComponent/withReactDOM") + var ReactRailsUJS = { // This attribute holds the name of component which should be mounted // example: `data-react-class="MyApp.Items.EditForm"` @@ -80,6 +82,11 @@ var ReactRailsUJS = { return ReactDOMServer[renderFunction](element) }, + // Render `component` using the specified `renderFunction` from `react-dom`. + // Override this function to render components in a custom way. + // function signature: ("hydrate" | "render", component, node, props) + renderComponent: renderWithReactDOM, + // Within `searchSelector`, find nodes which should have React components // inside them, and mount them with their props. mountComponents: function(searchSelector) { @@ -112,9 +119,9 @@ var ReactRailsUJS = { } if (hydrate && typeof ReactDOM.hydrate === "function") { - component = ReactDOM.hydrate(component, node); + renderComponent("hydrate", component, node, props); } else { - component = ReactDOM.render(component, node); + renderComponent("render", component, node, props); } } } diff --git a/react_ujs/src/renderComponent/withReactDOM.js b/react_ujs/src/renderComponent/withReactDOM.js new file mode 100644 index 000000000..a6785a2ed --- /dev/null +++ b/react_ujs/src/renderComponent/withReactDOM.js @@ -0,0 +1,10 @@ +var ReactDOM = require("react-dom") + +// Render React component via ReactDOM, for example: +// +// - `renderComponent("hydrate", component, node, props)` -> `ReactDOM.hydrate(component, node);` +// - `renderComponent("render", component, node, props)` -> `ReactDOM.render(component, node);` +// +module.exports = function(renderFunctionName, component, node) { + ReactDOM[renderFunctionName](component, node); +};