ericclemmons · DarylThayil · Jul 7, 2018
diff --git a/docs/getting-started/ClientRendering.md b/docs/getting-started/ClientRendering.md
@@ -20,5 +20,18 @@ import { Resolver } from "react-resolver";
 Resolver.render(
   () => <Router ... />,
   document.getElementById("app")
-); 
+);
 ```
+
+If you want to take advantage of the `hydrate()` method available on `ReactDOM` [React Dom Docs]('https://reactjs.org/docs/react-dom.html#hydrate'), `Resolver` supports this with the `hydrateRender()` method.
+
+Use this just like `Resolver.render()`;
+
+```js
+import { Resolver } from "react-resolver";
+
+Resolver.hydrateRender(
+  () => <Router ... />,
+  document.getElementById("app")
+);
+```
diff --git a/package.json b/package.json
@@ -7,15 +7,16 @@
     "test": "test"
   },
   "peerDependencies": {
-    "react": "^0.14.6 || ^15.0.0-0 || ^16.0.0",
-    "react-dom": "^0.14.6 || ^15.0.0-0 || ^16.0.0"
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
   },
   "devDependencies": {
     "babel": "5.8.34",
     "eslint-config-future": "^2.1.1",
     "gitbook-cli": "2.3.0",
     "gitbook-plugin-prism": "^1.1.0",
     "gitbook-plugin-todo": "0.1.2",
+    "jsdom": "^9.12.0",
     "mocha": "2.3.4",
     "prop-types": "^15.5.8",
     "react": "^16.0.0",

diff --git a/src/Resolver.js b/src/Resolver.js
@@ -45,13 +45,23 @@ export default class Resolver extends React.Component {
     delete window[PAYLOAD];
   }
 
+  static hydrateRender = function(render, node, data = window[PAYLOAD]) {
+    ReactDOM.hydrate((
+      <Resolver data={data}>
+        {render}
+      </Resolver>
+    ), node);
+
+    delete window[PAYLOAD];
+  }
+
   static resolve = function(render, initialData = {}) {
     const queue = [];
 
     renderToStaticMarkup(
       <Resolver data={initialData} onResolve={((promise) => {
         queue.push(promise);
-        return Promise.resolve(true); 
+        return Promise.resolve(true);
       })}>
         {render}
       </Resolver>

diff --git a/test/mocha.opts b/test/mocha.opts
@@ -1,4 +1,5 @@
 --compilers js:babel/register
+--require ./test/setup.js
 --recursive
 --reporter spec
 --ui bdd
diff --git a/test/resolve.test.js b/test/resolve.test.js
@@ -68,4 +68,28 @@ describe("@resolve", function() {
       );
     });
   });
+
+  context("browser render and hydrateRender", function() {
+
+    it("browser render", () => {
+      return Resolver.render(() => (<Test actual="testRender" expected="testRender" />), document.getElementById("resolver"))
+    })
+
+    it("browser hydrateRender", () => {
+      return Resolver.hydrateRender(() => (<Test actual="testHydrateRender" expected="testHydrateRender" />), document.getElementById("resolver"))
+    })
+
+    it("browser render markup", function() {
+      Resolver.render(() => (<Test actual="testRender" expected="testRender" />), document.getElementById("resolver"));
+      const markup = document.getElementById("resolver").innerHTML;
+      assert.equal(markup, "<pre>testRender</pre>");
+    });
+
+    it("browser hydrateRender markup", function() {
+      Resolver.hydrateRender(() => (<Test actual="testHydrateRender" expected="testHydrateRender" />), document.getElementById("resolver"))
+      const markup = document.getElementById("resolver").innerHTML;
+      assert.equal(markup, "<pre>testHydrateRender</pre>");
+    });
+
+  });
 });
diff --git a/test/setup.js b/test/setup.js
@@ -0,0 +1,20 @@
+var jsdom = require("jsdom").jsdom;
+var document = jsdom("<!doctype html><html><body><div id=\"resolver\"/></body></html>");
+var window = document.defaultView;
+
+function copyProps(src, target) {
+  const props = Object.getOwnPropertyNames(src)
+    .filter(prop => typeof target[prop] === 'undefined')
+    .reduce((result, prop) => ({
+      ...result,
+      [prop]: Object.getOwnPropertyDescriptor(src, prop)
+    }), {});
+  Object.defineProperties(target, props);
+}
+
+global.window = window;
+global.document = window.document;
+global.navigator = {
+  userAgent: 'node.js'
+};
+copyProps(window, global);