partial-hydrate - npm Package Compare versions

Comparing version 1.2.1 to 1.2.4

package.json

 {
   "name": "partial-hydrate",
   "description": "Partial React hydration wrapper component based on screen width for faster responsive performances",
-  "version": "1.2.1",
+  "version": "1.2.4",
   "author": "GeorgeCht <[e-mail]>",
@@ -6,0 +6,0 @@ "license": "MIT",

README.md

@@ -1,4 +0,5 @@
-# Partial Hydrate [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Build and Test](https://github.com/actions/checkout/actions/workflows/test.yml/badge.svg)](https://github.com/actions/checkout/actions/workflows/test.yml)
+# Partial Hydrate [![NPM version][npm-image]][npm-url] ![npm bundle size](https://img.shields.io/bundlephobia/minzip/partial-hydrate?logo=npm) [![Downloads][downloads-image]][npm-url] [![Test](https://github.com/actions/checkout/actions/workflows/test.yml/badge.svg)](https://github.com/actions/checkout/actions/workflows/test.yml)
 
 ## Introduction
+
 Provides a `<PartialHydrate>` component that conditionally _skips hydrating children_ by removing them from the DOM _before the first client render_. Removing them before ensures hydration is successful and there are no hydration mismatch errors.
@@ -15,8 +16,13 @@
 ```tsx
-  <PartialHydrate when={() => { window.innerWidth <= 680 }}>
-    { /* My mobile component */ }
-  </PartialHydrate>
+<PartialHydrate
+  when={() => {
+    window.innerWidth <= 680
+  }}
+>
+  {/* My mobile component */}
+</PartialHydrate>
 ```
 
 ## Props
+
 - `minWidth`: will render if window width is greater than `minWidth` value.
@@ -27,4 +33,5 @@ - `maxWidth`: will render if window width is lesser than `maxWidth` value.
 ### Use with minWidth and/or maxWidth
-You can use the `minWidth` and/or `maxWidth` props individually or together to conditionally render  components based on the window width. Here's an example:
 
+You can use the `minWidth` and/or `maxWidth` props individually or together to conditionally render components based on the window width. Here's an example:
+
 ```tsx
@@ -49,4 +56,5 @@ const MyComponent = () => {
 ### Use with when()
-The `when()` prop allows for a custom condition based on a function. It is particularly useful for your  _dynamic conditions_. For example:
 
+The `when()` prop allows for a custom condition based on a function. It is particularly useful for your _dynamic conditions_. For example:
+
 ```tsx
@@ -56,3 +64,3 @@ const MyComponent = () => {
     <PartialHydrate when={() => someDynamicCondition()}>
-      { /* Rendered if the custom condition specified in the `when()` function is true */ }
+      {/* Rendered if the custom condition specified in the `when()` function is true */}
     </PartialHydrate>
@@ -64,2 +72,3 @@ )
 ## Use case
+
 When using React's server-side rendering, we often need to render components on the server even if they are conditional on the client _e.g. hidden based on window width_.
@@ -72,5 +81,7 @@
 ## Caveats
+
 So is this another react _responsive_ rendering library? Nope. If the prop conditions are not met, then `<PartialHydrate>`'s children are never rendered.
 
 #### ✋ Keep in mind
+
 Also, keep in mind that using `<PartialHydrate>` does not work on window resize and it is not meant to!
@@ -77,0 +88,0 @@

No alert changes

Improved metrics

Number of lines in readme file

97

increased by12.79%

Worsened metrics

Total package byte prevSize

28545

decreased by-99.3%

Number of package files

21

decreased by-25%

No dependency changes