react-without-hydration - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/index.js

@@ -26,2 +26,6 @@ "use strict";
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 var isClientSide = _exenv["default"].canUseDOM;
@@ -47,3 +51,7 @@
   return function (WrappedComponent) {
-    var WithoutHydration = function WithoutHydration(props) {
+    var WithoutHydration = function WithoutHydration(_ref2) {
+      var _ref2$forceHydration = _ref2.forceHydration,
+          forceHydration = _ref2$forceHydration === void 0 ? false : _ref2$forceHydration,
+          props = _objectWithoutProperties(_ref2, ["forceHydration"]);
+
       var rootRef = (0, _react.useRef)(null);
@@ -53,13 +61,15 @@
           _useState2 = _slicedToArray(_useState, 2),
-          wasRenderedServerSide = _useState2[0],
-          setWasRenderedServerSide = _useState2[1];
+          shouldHydrate = _useState2[0],
+          setShouldHydrate = _useState2[1];
 
       (0, _react.useLayoutEffect)(function () {
-        setWasRenderedServerSide(!!rootRef.current.getAttribute("data-no-hydrate"));
-      }, [rootRef]);
+        if (shouldHydrate) return;
+        var wasRenderedServerSide = !!rootRef.current.getAttribute("data-no-hydrate");
+        setShouldHydrate(!wasRenderedServerSide && !disableFallback || forceHydration);
+      });
       (0, _react.useLayoutEffect)(function () {
-        if (!wasRenderedServerSide || !onUpdate) return;
+        if (shouldHydrate || shouldHydrate === undefined || !onUpdate) return;
         onUpdate(props, rootRef.current);
       });
-      if (isClientSide && (wasRenderedServerSide === undefined || wasRenderedServerSide || disableFallback)) return _react["default"].createElement("section", {
+      if (!shouldHydrate) return _react["default"].createElement("section", {
         ref: rootRef,
@@ -66,0 +76,0 @@ dangerouslySetInnerHTML: {

package.json

 {
     "name": "react-without-hydration",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "description": "Skip the hydration step on the client for a component rendered server side.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -1,19 +0,35 @@
-# react-without-hydration
+<div align="center">
+  <h1>
+    <br/>
+    <br/>
+    ☔
+    <br />
+    react-without-hydration
+    <br />
+    <br />
+    <br />
+  </h1>
+  <sup>
+    <br />
+    <br />
+    <a href="https://www.npmjs.com/package/react-without-hydration">
+       <img src="https://img.shields.io/github/actions/workflow/status/valcol/react-without-hydration/main.yml" alt="npm package" />
+    </a>
+    <a href="https://www.npmjs.com/package/react-without-hydration">
+       <img src="https://img.shields.io/bundlephobia/minzip/react-without-hydration" alt="dep size" />
+    </a>
+    <a href="https://www.npmjs.com/package/react-without-hydration">
+      <img src="https://img.shields.io/npm/v/react-without-hydration" alt="version" />
+    </a>
+    <br />
+  </sup>
+   <h3>Skip the hydration step on the client for a component rendered server side.<h3>
+  <br />
+  <br />
+  <pre>npm i <a href="https://www.npmjs.com/package/react-without-hydration">react-without-hydration</a></pre>
+  <pre>yarn add <a href="https://www.npmjs.com/package/react-without-hydration">react-without-hydration</a></pre>
+  <br />
+  <br />
+</div>
 
-Skip the hydration step on the client for a component rendered server side.
-
-## Install
-
-#### npm
-
-```
-npm install react-without-hydration --save
-```
-
-#### yarn
-
-```
-yarn add react-without-hydration
-```
-
 ## How to use
@@ -34,2 +50,4 @@
 
+## FAQ
+
 ### What if my component is also used client side only ?
@@ -43,5 +61,24 @@
 
+## Props
+
+#### `forceHydration`
+
+Pass `forceHydration` at true to force hydration even if the component was rendered server side.
+
+```js
+import withoutHydration from "react-without-hydration";
+import Card from "../Card";
+
+const CardWithoutHydration = withoutHydration()(Card);
+
+export default class App extends React.Component {
+    render() {
+        return <CardWithoutHydration title="my card" forceHydration />;
+    }
+}
+```
+
 ## Options
 
-#### onUpdate
+#### `onUpdate`
 
@@ -63,3 +100,3 @@ A function to update the DOM after a props update.
 
-#### disableFallback
+#### `disableFallback`
 
@@ -66,0 +103,0 @@ A boolean set at `false` by default.

No alert changes

Improved metrics

Total package byte prevSize

10908

increased by27.71%

Lines of code

76

increased by13.43%

Number of lines in readme file

112

increased by49.33%

No dependency changes