react-hook-media - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

configureNodeEnv/index.d.ts

@@ -1,3 +0,5 @@
-import { MatchMediaHydrationContext } from "../MatchMediaHydrationProvider";
-export type MediaQueryEnvironmentConfig = {
+import { MatchMediaHydrationContext } from '../MatchMediaHydrationProvider/index.js';
+import 'react';
+
+type MediaQueryEnvironmentConfig = {
     all?: true;
@@ -39,7 +41,7 @@ anyHover?: "none" | "hover";
 /**
- * Configures the Node environment for server-side rendering (SSR) or testing scenarios.
+ * Configures the Node environment for server-side rendering (SSR).
  *
  * 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.
+ * when running React components on the server. It allows you to provide a custom
+ * configuration object to simulate different media query results.
  *
@@ -84,2 +86,3 @@ * The configuration object should contain properties that match the media query conditions
 declare const configureNodeEnv: (config: MediaQueryEnvironmentConfig) => MatchMediaHydrationContext;
-export default configureNodeEnv;
+
+export { type MediaQueryEnvironmentConfig, configureNodeEnv as default };

configureNodeEnv/index.js

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

index.d.ts

@@ -1,4 +0,5 @@
-export { default as MatchMedia, type MatchMediaProps } from "./MatchMedia";
-export { default as useMatchMedia } from "./useMatchMedia";
-export { default as MatchMediaHydrationProvider, type MatchMediaHydrationContext, } from "./MatchMediaHydrationProvider";
-export { default as configureNodeEnv, type MediaQueryEnvironmentConfig, } from "./configureNodeEnv";
+export { default as MatchMedia, MatchMediaProps } from './MatchMedia/index.js';
+export { default as useMatchMedia } from './useMatchMedia/index.js';
+export { MatchMediaHydrationContext, default as MatchMediaHydrationProvider } from './MatchMediaHydrationProvider/index.js';
+export { MediaQueryEnvironmentConfig, default as configureNodeEnv } from './configureNodeEnv/index.js';
+import 'react';

index.js

@@ -1,6 +0,6 @@
-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';
+export { MatchMedia_default as MatchMedia } from './_chunks/chunk-H6BD3UXI.js';
+export { MatchMediaHydrationProvider_default as MatchMediaHydrationProvider } from './_chunks/chunk-ECZEQPCL.js';
+export { configureNodeEnv_default as configureNodeEnv } from './_chunks/chunk-J7LXJJ3O.js';
+export { useMatchMedia_default as useMatchMedia } from './_chunks/chunk-CTZ4UZ25.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

MatchMedia/index.d.ts

@@ -1,8 +0,5 @@
-import { FC, PropsWithChildren, ReactNode } from "react";
-export type MatchMediaProps = PropsWithChildren<{
+import { ReactNode, PropsWithChildren } from 'react';
+
+type Props = PropsWithChildren<{
     /**
-     * The media query to evaluate.
-     */
-    query: string;
-    /**
      * The content to render if the media query does not match (optional).
@@ -12,10 +9,18 @@ */
 }>;
+type MatchMediaProps<T extends string | string[] = string> = {
+    /**
+     * The media query to evaluate.
+     */
+    query: T;
+} & ((T extends string ? Props : never) | {
+    render(...isMatched: T extends string | [string] ? [boolean] : {
+        [key in keyof T]: boolean;
+    }): ReactNode;
+});
 /**
  * Component that conditionally renders content based on a media query.
  *
- * The `MatchMedia` component evaluates the provided media query and renders its `children`
- * if the media query matches. Optionally, you can also provide an `otherwise` prop to specify
- * the content to render if the media query does not match.
+ * Evaluates the provided media query and renders its `children` if the media query matches. Optionally, you can also provide an `otherwise` prop to specify the content to render if the media query does not match. Alternatively, you can provide a `render` prop to conditionally render content based on the media query evaluation.
  *
- * > It uses `useMatchMedia` under the hood
+ * > It uses {@link useMatchMedia} under the hood
  *
@@ -37,4 +42,16 @@ * @example
  * ```
+ *
+ * @example
+ * ```jsx
+ * // Usage with an "render" prop
+ * <MatchMedia
+ *    query={["(width < 576px)", "(width > 1024px)"]}
+ *    render={(isMobile, isDesktop) =>
+ *      isMobile ? "mobile" : isDesktop ? "desktop" : "tablet"
+ *    }
+ * />
+ * ```
  */
-declare const MatchMedia: FC<MatchMediaProps>;
-export default MatchMedia;
+declare const MatchMedia: <const T extends string | string[]>(props: MatchMediaProps<T>) => ReactNode;
+
+export { type MatchMediaProps, MatchMedia as default };

MatchMedia/index.js

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

MatchMediaHydrationProvider/index.d.ts

@@ -1,7 +0,11 @@
-/// <reference types="react" />
-export type MatchMediaHydrationContext = Record<string, boolean>;
+import { FC, PropsWithChildren } from 'react';
+
+type MatchMediaHydrationContext = [Record<string, boolean>];
 /**
  * Context provider component for hydration of media query configuration.
  */
-declare const MatchMediaHydrationProvider: import("react").Provider<MatchMediaHydrationContext>;
-export default MatchMediaHydrationProvider;
+declare const MatchMediaHydrationProvider: FC<PropsWithChildren<{
+    value: MatchMediaHydrationContext;
+}>>;
+
+export { type MatchMediaHydrationContext, MatchMediaHydrationProvider as default };

MatchMediaHydrationProvider/index.js

@@ -1,3 +0,3 @@
-export { HydrationContext, MatchMediaHydrationProvider_default as default } from '../chunk-PQCTR6QK.js';
+export { MatchMediaHydrationProvider_default as default } from '../_chunks/chunk-ECZEQPCL.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-hook-media",
-  "version": "1.0.1",
-  "author": "Krombik",
+  "version": "1.1.0",
+  "author": "Andrii Dubetskyi",
   "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.",
@@ -12,4 +12,3 @@ "keywords": [
     "conditional rendering",
-    "SSR",
-    "testing"
+    "SSR"
   ],
@@ -35,2 +34,3 @@ "repository": {
   "dependencies": {
+    "lodash.identity": "^3.0.0",
     "lodash.noop": "^3.0.1"
@@ -47,3 +47,56 @@ },
   "types": "./index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "require": {
+        "types": "./index.d.cts",
+        "default": "./index.cjs"
+      },
+      "import": {
+        "types": "./index.d.ts",
+        "default": "./index.js"
+      }
+    },
+    "./MatchMedia": {
+      "require": {
+        "types": "./MatchMedia/index.d.cts",
+        "default": "./MatchMedia/index.cjs"
+      },
+      "import": {
+        "types": "./MatchMedia/index.d.ts",
+        "default": "./MatchMedia/index.js"
+      }
+    },
+    "./MatchMediaHydrationProvider": {
+      "require": {
+        "types": "./MatchMediaHydrationProvider/index.d.cts",
+        "default": "./MatchMediaHydrationProvider/index.cjs"
+      },
+      "import": {
+        "types": "./MatchMediaHydrationProvider/index.d.ts",
+        "default": "./MatchMediaHydrationProvider/index.js"
+      }
+    },
+    "./configureNodeEnv": {
+      "require": {
+        "types": "./configureNodeEnv/index.d.cts",
+        "default": "./configureNodeEnv/index.cjs"
+      },
+      "import": {
+        "types": "./configureNodeEnv/index.d.ts",
+        "default": "./configureNodeEnv/index.js"
+      }
+    },
+    "./useMatchMedia": {
+      "require": {
+        "types": "./useMatchMedia/index.d.cts",
+        "default": "./useMatchMedia/index.cjs"
+      },
+      "import": {
+        "types": "./useMatchMedia/index.d.ts",
+        "default": "./useMatchMedia/index.js"
+      }
+    }
+  },
   "sideEffects": false
 }

README.md

@@ -5,3 +5,3 @@ # react-hook-media
 
-The library also provides a server-side rendering (SSR) and testing compatibility feature through the [configureNodeEnv](#configurenodeenv) method. It allows you to configure the Node environment to simulate different media query results during server-side rendering or testing scenarios.
+The library also provides a server-side rendering (SSR) feature through the [configureNodeEnv](#configurenodeenv) method. It allows you to configure the Node environment to simulate different media query results during server-side rendering.
 
@@ -51,2 +51,8 @@ React Hook Media is simple to use and integrates seamlessly with React applications, providing a convenient way to handle media queries and create responsive UI components.
       </MatchMedia>
+      <MatchMedia
+        query={["(width < 576px)", "(width > 1024px)"]}
+        render={(isMobile, isDesktop) =>
+          isMobile ? "mobile" : isDesktop ? "desktop" : "tablet"
+        }
+      />
     </div>
@@ -98,17 +104,33 @@ );
 ```ts
-type MatchMediaProps = PropsWithChildren<{
+type MatchMediaProps<T extends string | string[] = string> = {
   /**
    * The media query to evaluate.
    */
-  query: string;
-  /**
-   * The content to render if the media query does not match (optional).
-   */
-  otherwise?: ReactNode;
-}>;
+  query: T;
+} & (
+  | (T extends string
+      ? PropsWithChildren<{
+          /**
+           * The content to render if the media query does not match (optional).
+           */
+          otherwise?: ReactNode;
+        }>
+      : never)
+  | {
+      render(
+        ...isMatched: T extends string | [string]
+          ? [boolean]
+          : {
+              [key in keyof T]: boolean;
+            }
+      ): ReactNode;
+    }
+);
 
-const MatchMedia: FC<MatchMediaProps>;
+const MatchMedia: <const T extends string | string[]>(
+  props: MatchMediaProps<T>
+) => ReactNode;
 ```
 
-Evaluates the provided media query and renders its `children` if the media query matches. Optionally, you can also provide an `otherwise` prop to specify the content to render if the media query does not match.
+Evaluates the provided media query and renders its `children` if the media query matches. Optionally, you can also provide an `otherwise` prop to specify the content to render if the media query does not match. Alternatively, you can provide a `render` prop to conditionally render content based on the media query evaluation.
 
@@ -127,5 +149,5 @@ > It uses the [useMatchMedia](#usematchmedia) hook under the hood
 
-Configures the Node environment for server-side rendering (SSR) or testing scenarios.
+Configures the Node environment for server-side rendering (SSR).
 
-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.
+This function is used to set up the environment for the [useMatchMedia](#usematchmedia) hook when running React components on the server. It allows you to provide a custom configuration object to simulate different media query results.
 
@@ -132,0 +154,0 @@ 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.

useMatchMedia/index.d.ts

@@ -1,24 +0,22 @@
-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.
-     *
-     * > 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).
-     *
-     * @example
-     * ```js
-     * // Usage in a React component
-     * const isMobile = useMatchMedia('(max-width: 768px)');
-     * if (isMobile) {
-     *   // Render mobile layout
-     * } else {
-     *   // Render desktop layout
-     * }
-     * ```
-     *
-     * @param {string} mediaQuery - The media query to be evaluated.
-     * @returns {boolean} `true` if the media query matches, `false` otherwise.
-     */
-    (mediaQuery: string): boolean;
-};
-declare const useMatchMedia: UseMatchMedia;
-export default 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.
+ *
+ * > 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).
+ *
+ * @example
+ * ```js
+ * // Usage in a React component
+ * const isMobile = useMatchMedia('(max-width: 768px)');
+ * if (isMobile) {
+ *   // Render mobile layout
+ * } else {
+ *   // Render desktop layout
+ * }
+ * ```
+ *
+ * @param mediaQuery - The media query to be evaluated.
+ * @returns  `true` if the media query matches, `false` otherwise.
+ */
+declare const useMatchMedia: (mediaQuery: string) => boolean;
+
+export { useMatchMedia as default };

useMatchMedia/index.js

@@ -1,3 +0,3 @@
-export { useMatchMedia_default as default, replaceUseMatchMedia } from '../chunk-D5HRICXA.js';
+export { useMatchMedia_default as default } from '../_chunks/chunk-CTZ4UZ25.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

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

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

86276

increased by13.13%

Number of package files

53

increased by10.42%

Lines of code

728

increased by0.28%

Number of lines in readme file

171

increased by14.77%

Number of medium supply chain risk alerts

1

decreased by-80%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Addedlodash.identity@^3.0.0

• + Addedlodash.identity@3.0.0(transitive)