react-hook-media - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

configureNodeEnv/index.js

@@ -1,3 +0,3 @@
-export { configureNodeEnv_default as default } from '../chunk-4ZWMFY3T.js';
+export { configureNodeEnv_default as default } from '../chunk-D5APFJZD.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

index.js

@@ -1,6 +0,6 @@
-export { MatchMedia_default as MatchMedia } from './chunk-FPIRNL5R.js';
-export { configureNodeEnv_default as configureNodeEnv } from './chunk-4ZWMFY3T.js';
-export { useMatchMedia_default as useMatchMedia } from './chunk-JTPMRFZI.js';
+export { MatchMedia_default as MatchMedia } from './chunk-5LOZ4RRE.js';
+export { configureNodeEnv_default as configureNodeEnv } from './chunk-D5APFJZD.js';
+export { useMatchMedia_default as useMatchMedia } from './chunk-D5HRICXA.js';
 export { MatchMediaHydrationProvider_default as MatchMediaHydrationProvider } from './chunk-PQCTR6QK.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

MatchMedia/index.js

@@ -1,3 +0,3 @@
-export { MatchMedia_default as default } from '../chunk-FPIRNL5R.js';
+export { MatchMedia_default as default } from '../chunk-5LOZ4RRE.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-hook-media",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "author": "Krombik",
@@ -5,0 +5,0 @@ "description": "A lightweight and tree-shakable library for working with media queries in React applications, providing responsive behavior and conditional rendering based on media query conditions.",

README.md

@@ -13,3 +13,3 @@ # react-hook-media
 
-```
+```bash
 npm install --save react-hook-media
@@ -20,6 +20,12 @@ ```
 
-```
+```bash
 yarn add react-hook-media
 ```
 
+or pnpm:
+
+```bash
+pnpm add react-hook-media
+```
+
 ---
@@ -42,8 +48,5 @@
     <div>
-      {isDesktop ? "This is desktop" : "This is mobile"}
-      <MatchMedia
-        query="(max-width: 899px)"
-        otherwise={"And this is also desktop"}
-      >
-        And this is also mobile
+      {isDesktop ? "desktop" : "mobile"}
+      <MatchMedia query="(width < 900px)" otherwise={"desktop"}>
+        mobile
       </MatchMedia>
@@ -85,5 +88,5 @@ </div>
 
-Custom hook that implements the behavior of the [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) method as a React hook.
+Custom hook that provides the functionality of the [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) method as a React hook.
 
-> In a Node environment, this hook will always return `false` by default since media queries are not supported. However, you can customize the behavior of `useMatchMedia` by using the [configureNodeEnv](#configurenodeenv) method
+> In a Node environment, where media queries are not supported, you must use the [configureNodeEnv](#configurenodeenv) method to simulate different device conditions, like in [example](#example).
 
@@ -127,5 +130,5 @@ Returns `true` if the media query matches, `false` otherwise.
 
-This function is used to set up the environment for the useMatchMedia hook when running React components on the server or in testing environments. It allows you to provide a custom configuration object to simulate different media query results.
+This function is used to set up the environment for the [useMatchMedia](#usematchmedia) hook when running React components on the server or in testing environments. It allows you to provide a custom configuration object to simulate different media query results.
 
-The configuration object should contain properties that match the media query conditions you want to simulate. For example, if you configure it with `{ width: 768 }`, it will simulate the viewport width as if it were 768 pixels wide, affecting the results returned by useMatchMedia when evaluating media queries related to width.
+The configuration object should contain properties that match the media query conditions you want to simulate. For example, if you configure it with `{ width: 768 }`, it will simulate the viewport width as if it were 768 pixels wide, affecting the results returned by [useMatchMedia](#usematchmedia) when evaluating media queries related to width.
 
@@ -132,0 +135,0 @@ Returns a `MatchMediaHydrationContext` object that should be passed to the [MatchMediaHydrationProvider](#matchmediahydrationprovider).

useMatchMedia/index.d.ts

 type UseMatchMedia = {
     /**
-     * Custom hook that implements the behavior of the [matchMedia](#https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) method as a React hook.
+     * Custom hook that implements the behavior of the [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) method as a React hook.
      *
-     * > In a Node environment, this hook will always return `false` by default since media queries
-     * > are not supported. However, you can customize the behavior of `useMatchMedia` by using the
-     * > `configureNodeEnv` method. See the [documentation](https://github.com/Krombik/react-hook-media#configurenodeenv) for `configureNodeEnv` for more information.
+     * > In a Node environment, where media queries are not supported, you must use the [configureNodeEnv](https://github.com/Krombik/react-hook-media#configurenodeenv) method to simulate different device conditions, like in this [example](https://github.com/Krombik/react-hook-media#example).
      *
@@ -9,0 +7,0 @@ * @example

useMatchMedia/index.js

@@ -1,3 +0,3 @@
-export { useMatchMedia_default as default, setHandler } from '../chunk-JTPMRFZI.js';
+export { useMatchMedia_default as default, replaceUseMatchMedia } from '../chunk-D5HRICXA.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

76265

increased by1.09%

Lines of code

726

increased by0.41%

Number of lines in readme file

149

increased by2.05%

Worsened metrics

Number of medium supply chain risk alerts

5

increased by25%

No dependency changes