@opensea/react-media - npm Package Compare versions

Comparing version 1.0.8 to 1.0.9-rc0

dist/index.d.ts

@@ -1,35 +0,55 @@
-/// <reference types="react" />
-import { Size } from './SizeProvider.react';
-import { useIsHydrated } from './useIsHydrated';
-import { useWindowSize } from './useWindowSize';
-export declare function createMedia<TBreakpoints extends Record<string, number>, TSize extends Partial<Size>>(breakpoints: TBreakpoints, initialWindowSize?: TSize): {
+import * as React from 'react';
+
+type Size = {
+    height: number;
+    width: number;
+};
+
+type BetweenVariant = "start-inclusive" | "end-inclusive";
+
+type CreateMediaComponentOptions = {
+    betweenVariant?: BetweenVariant;
+};
+
+declare const useIsHydrated: () => boolean;
+
+declare const useWindowSize: <T extends Partial<Size>>(initialWindowSize?: T) => T;
+
+type CreateMediaOptions<TSize extends Partial<Size>> = CreateMediaComponentOptions & {
+    initialWindowSize?: TSize;
+};
+declare function createMedia<TBreakpoints extends Record<string, number>, TSize extends Partial<Size>>(breakpoints: TBreakpoints, { initialWindowSize, betweenVariant, }?: CreateMediaOptions<TSize>): {
     createMediaStyle: () => string;
     Media: (props: ({
-        children: import("react").ReactNode | ((className: string) => import("react").ReactNode);
+        children: React.ReactNode | ((className: string) => React.ReactNode);
     } & {
         at: keyof TBreakpoints;
     }) | ({
-        children: import("react").ReactNode | ((className: string) => import("react").ReactNode);
+        children: React.ReactNode | ((className: string) => React.ReactNode);
     } & {
+        lessThan: keyof TBreakpoints;
+    }) | ({
+        children: React.ReactNode | ((className: string) => React.ReactNode);
+    } & {
         lessThanOrEqual: keyof TBreakpoints;
     }) | ({
-        children: import("react").ReactNode | ((className: string) => import("react").ReactNode);
+        children: React.ReactNode | ((className: string) => React.ReactNode);
     } & {
         greaterThan: keyof TBreakpoints;
     }) | ({
-        children: import("react").ReactNode | ((className: string) => import("react").ReactNode);
+        children: React.ReactNode | ((className: string) => React.ReactNode);
     } & {
         greaterThanOrEqual: keyof TBreakpoints;
     }) | ({
-        children: import("react").ReactNode | ((className: string) => import("react").ReactNode);
+        children: React.ReactNode | ((className: string) => React.ReactNode);
     } & {
         between: [keyof TBreakpoints, keyof TBreakpoints];
-    })) => JSX.Element;
+    })) => React.JSX.Element | null;
     SizeProvider: ({ children }: {
-        children: import("react").ReactNode;
-    }) => JSX.Element;
+        children: React.ReactNode;
+    }) => React.JSX.Element;
     breakpoints: TBreakpoints;
     useSizeContextSelector: <Selected>(selector: (value: TSize & Partial<Size>) => Selected) => Selected;
 };
-export { useIsHydrated, useWindowSize };
-//# sourceMappingURL=index.d.ts.map
+
+export { createMedia, useIsHydrated, useWindowSize };

package.json

 {
   "name": "@opensea/react-media",
-  "version": "1.0.8",
+  "version": "1.0.9-rc0",
   "description": "Javascript library to deal with media queries in isomorphic React applications.",
   "license": "MIT",
   "author": "OpenSea Developers",
-  "type": "module",
-  "exports": {
-    "require": "./dist/index.cjs",
-    "default": "./dist/index.modern.js"
-  },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.module.js",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
@@ -19,5 +15,7 @@ "./dist",
   "scripts": {
-    "build": "microbundle --no-compress --sourcemap false --jsx jsx --jsxImportSource react --globals react/jsx-runtime=jsx",
+    "build": "tsup src/index.ts",
     "check-types": "tsc --noEmit",
-    "lint": "concurrently \"npm run check-types\" \"npm run prettier:check\" \"npm run prettier:package.json:check\"",
+    "eslint:check": "eslint . --max-warnings 0",
+    "eslint:fix": "eslint . --fix",
+    "lint": "concurrently \"npm run check-types\" \"npm run prettier:check\" \"npm run prettier:package.json:check\" \"npm run eslint:check\"",
     "prepare": "husky install",
@@ -30,3 +28,2 @@ "prettier:check": "prettier --check .",
   "sideEffects": false,
-  "types": "./dist/index.d.ts",
   "dependencies": {
@@ -40,19 +37,29 @@ "lodash.throttle": "4.1.1"
   "devDependencies": {
-    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/jest-dom": "6.0.1",
     "@testing-library/react": "14.0.0",
-    "@types/react": "18.2.0",
-    "@vitejs/plugin-react": "4.0.0",
-    "@vitest/coverage-c8": "0.30.1",
-    "concurrently": "8.0.1",
-    "esbuild": "0.17.18",
+    "@types/lodash.throttle": "4.1.7",
+    "@types/react": "18.2.19",
+    "@typescript-eslint/eslint-plugin": "6.4.1",
+    "@typescript-eslint/parser": "6.4.1",
+    "@vitejs/plugin-react": "4.0.4",
+    "@vitest/coverage-v8": "0.34.2",
+    "concurrently": "8.2.1",
+    "confusing-browser-globals": "1.0.11",
+    "esbuild": "0.19.2",
+    "eslint": "8.47.0",
+    "eslint-import-resolver-typescript": "3.6.0",
+    "eslint-plugin-import": "2.28.1",
+    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-react-hooks": "4.6.0",
     "husky": "8.0.3",
-    "jsdom": "21.1.1",
-    "lint-staged": "13.2.2",
+    "jsdom": "22.1.0",
+    "lint-staged": "14.0.1",
     "microbundle": "0.15.1",
-    "prettier": "2.8.8",
+    "prettier": "3.0.2",
     "prettier-package-json": "2.8.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "tsup": "7.2.0",
     "use-context-selector": "1.4.1",
-    "vitest": "0.30.1"
+    "vitest": "0.34.2"
   },
@@ -67,4 +74,7 @@ "lint-staged": {
   },
-  "source": "src/index.ts",
-  "unpkg": "./dist/index.umd.js"
+  "prettier": {
+    "arrowParens": "avoid",
+    "semi": false,
+    "trailingComma": "all"
+  }
 }

README.md

@@ -29,3 +29,3 @@ # react-media
 
-import { createMedia } from '@opensea/react-media';
+import { createMedia } from "@opensea/react-media"
 
@@ -37,3 +37,3 @@ const {
   breakpoints,
-  useSizeContextSelector
+  useSizeContextSelector,
 } = createMedia({
@@ -44,10 +44,10 @@ sm: 640,
   xl: 1280,
-  '2xl': 1536,
+  "2xl": 1536,
   container: 1600,
-  '3xl': 1910
-});
+  "3xl": 1910,
+})
 
-export const mediaStyle = createMediaStyle();
+export const mediaStyle = createMediaStyle()
 
-export { Media, breakpoints, useSizeContextSelector };
+export { Media, breakpoints, useSizeContextSelector }
 ```
@@ -59,3 +59,3 @@
 export function ComponentX() {
-  return <Media greaterThan="md">Render if greater than md</Media>;
+  return <Media greaterThan="md">Render if greater than md</Media>
 }
@@ -69,5 +69,5 @@ ```
 
-import React from 'react';
-import { SizeProvider } from './media';
-import type { AppProps } from 'next/app';
+import React from "react"
+import { SizeProvider } from "./media"
+import type { AppProps } from "next/app"
 
@@ -79,3 +79,3 @@ export default function App({ Component, pageProps }: AppProps) {
     </SizeProvider>
-  );
+  )
 }
@@ -87,4 +87,4 @@ ```
 
-import { Html, Head, Main, NextScript } from 'next/document';
-import { mediaStyles } from './media';
+import { Html, Head, Main, NextScript } from "next/document"
+import { mediaStyles } from "./media"
 
@@ -105,3 +105,3 @@ export default function Document() {
     </Html>
-  );
+  )
 }
@@ -117,10 +117,10 @@ ```
 // ComponentX.react.tsx
-import { breakpoints, useSizeContextSelector } from './media';
+import { breakpoints, useSizeContextSelector } from "./media"
 
 const useIsLessThanLg = () => {
-  return useSizeContextSelector((value) => value.width < breakpoints.lg);
-};
+  return useSizeContextSelector(value => value.width < breakpoints.lg)
+}
 
 export function ComponentX() {
-  const isLessThanLg = useIsLessThanLg();
+  const isLessThanLg = useIsLessThanLg()
 
@@ -131,5 +131,5 @@ return (
         if (isLessThanLg) {
-          console.log('less than lg');
+          console.log("less than lg")
         } else {
-          console.log('not less than lg');
+          console.log("not less than lg")
         }
@@ -140,4 +140,4 @@ }}
     </button>
-  );
+  )
 }
 ```

src/index.ts

@@ -1,32 +0,52 @@
-import { useContextSelector } from 'use-context-selector';
-import { createMediaComponent } from './Media.react';
-import { Size, createSizeProvider } from './SizeProvider.react';
-import { generateMediaStyles } from './stylesheet';
-import { useIsHydrated } from './useIsHydrated';
-import { useWindowSize } from './useWindowSize';
+import { useContextSelector } from "use-context-selector"
+import {
+  CreateMediaComponentOptions,
+  createMediaComponent,
+} from "./Media.react"
+import { Size, createSizeProvider } from "./SizeProvider.react"
+import { generateMediaStyles } from "./stylesheet"
+import { useIsHydrated } from "./useIsHydrated"
+import { useWindowSize } from "./useWindowSize"
 
+type CreateMediaOptions<TSize extends Partial<Size>> =
+  CreateMediaComponentOptions & {
+    initialWindowSize?: TSize
+  }
+
 export function createMedia<
   TBreakpoints extends Record<string, number>,
-  TSize extends Partial<Size>
->(breakpoints: TBreakpoints, initialWindowSize: TSize = {} as TSize) {
+  TSize extends Partial<Size>,
+>(
+  breakpoints: TBreakpoints,
+  {
+    initialWindowSize = {} as TSize,
+    betweenVariant,
+  }: CreateMediaOptions<TSize> = {},
+) {
   function createMediaStyle() {
-    return generateMediaStyles(breakpoints);
+    return generateMediaStyles(breakpoints)
   }
 
   const { SizeProvider, SizeContext } = createSizeProvider<TSize>({
-    initialWindowSize
-  });
+    initialWindowSize,
+  })
 
-  type SizeWithInitialSize = TSize & Partial<Size>;
+  type SizeWithInitialSize = TSize & Partial<Size>
 
   function useSizeContextSelector<Selected>(
-    selector: (value: SizeWithInitialSize) => Selected
+    selector: (value: SizeWithInitialSize) => Selected,
   ) {
     return useContextSelector<SizeWithInitialSize, Selected>(
       SizeContext,
-      selector
-    );
+      selector,
+    )
   }
 
-  const Media = createMediaComponent(breakpoints, SizeContext);
+  const Media = createMediaComponent<TBreakpoints, TSize>(
+    breakpoints,
+    SizeContext,
+    {
+      betweenVariant,
+    },
+  )
 
@@ -38,6 +58,7 @@ return {
     breakpoints,
-    useSizeContextSelector
-  };
+    useSizeContextSelector,
+  }
 }
 
-export { useIsHydrated, useWindowSize };
+// eslint-disable-next-line import/no-unused-modules
+export { useIsHydrated, useWindowSize }

src/stylesheet.ts

@@ -1,31 +0,37 @@
-import { MEDIA_CLASS_NAME_PREFIX, generateRuleSet, keys } from './utils';
+import { MEDIA_CLASS_NAME_PREFIX, generateRuleSet, keys } from "./utils"
 
 export const generateMediaStyles = <T extends Record<string, number>>(
-  breakpoints: T
+  breakpoints: T,
 ) => {
-  const classNames: string[] = [];
+  const classNames: string[] = []
 
   for (const breakpoint of keys(breakpoints)) {
-    const breakpointPixels = breakpoints[breakpoint];
+    const breakpointPixels = breakpoints[breakpoint]
     classNames.push(
       generateRuleSet({
         media: `(min-width:${breakpointPixels + 1}px)`,
-        className: `${MEDIA_CLASS_NAME_PREFIX}-at-${breakpoint.toString()}`
-      })
-    );
+        className: `${MEDIA_CLASS_NAME_PREFIX}-at-${breakpoint.toString()}`,
+      }),
+    )
     classNames.push(
       generateRuleSet({
+        media: `(min-width:${breakpointPixels}px)`,
+        className: `${MEDIA_CLASS_NAME_PREFIX}-lessThan-${breakpoint.toString()}`,
+      }),
+    )
+    classNames.push(
+      generateRuleSet({
         media: `(max-width:${breakpointPixels - 1}px)`,
-        className: `${MEDIA_CLASS_NAME_PREFIX}-greaterThanOrEqual-${breakpoint.toString()}`
-      })
-    );
+        className: `${MEDIA_CLASS_NAME_PREFIX}-greaterThanOrEqual-${breakpoint.toString()}`,
+      }),
+    )
     classNames.push(
       generateRuleSet({
         media: `(max-width:${breakpointPixels}px)`,
-        className: `${MEDIA_CLASS_NAME_PREFIX}-greaterThan-${breakpoint.toString()}`
-      })
-    );
+        className: `${MEDIA_CLASS_NAME_PREFIX}-greaterThan-${breakpoint.toString()}`,
+      }),
+    )
   }
 
-  return classNames.join('\n');
-};
+  return classNames.join("\n")
+}

src/types.ts

@@ -1,6 +0,1 @@
-export type BreakpointKey<T extends string> = T;
-
-export type BetweenBreakpointsKey<T extends string> = [
-  BreakpointKey<T>,
-  BreakpointKey<T>
-];
+export type BetweenVariant = "start-inclusive" | "end-inclusive"

src/useIsHydrated.ts

@@ -1,16 +0,17 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react"
 
-let _isHydrated = false;
+let _isHydrated = false
 
 export const useIsHydrated = () => {
-  const [isHydrated, setIsHydrated] = useState(_isHydrated);
+  const [isHydrated, setIsHydrated] = useState(_isHydrated)
 
   useEffect(() => {
-    _isHydrated = true;
+    _isHydrated = true
     if (!isHydrated) {
-      setIsHydrated(true);
+      setIsHydrated(true)
     }
-  }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
-  return isHydrated;
-};
+  return isHydrated
+}

src/useWindowSize.ts

@@ -1,4 +0,4 @@
-import { useEffect, useState } from 'react';
-import throttle from 'lodash.throttle';
-import { Size } from './SizeProvider.react';
+import throttle from "lodash.throttle"
+import { useEffect, useState } from "react"
+import { Size } from "./SizeProvider.react"
 
@@ -8,6 +8,6 @@ export const useWindowSize = <T extends Partial<Size>>(
     width: undefined,
-    height: undefined
-  } as T
+    height: undefined,
+  } as T,
 ) => {
-  const [windowSize, setWindowSize] = useState<T>(initialWindowSize);
+  const [windowSize, setWindowSize] = useState<T>(initialWindowSize)
 
@@ -18,17 +18,17 @@ useEffect(() => {
         width: window.innerWidth,
-        height: window.innerHeight
-      } as T);
-    };
+        height: window.innerHeight,
+      } as T)
+    }
 
-    const onResize = throttle(handleResize, 100);
+    const onResize = throttle(handleResize, 100)
 
-    window.addEventListener('resize', onResize);
+    window.addEventListener("resize", onResize)
 
     // Call handler right away so state gets updated with initial window size
-    handleResize();
+    handleResize()
 
-    return () => window.removeEventListener('resize', onResize);
-  }, []);
+    return () => window.removeEventListener("resize", onResize)
+  }, [])
 
-  return windowSize;
-};
+  return windowSize
+}

src/utils.ts

@@ -1,18 +0,16 @@
-import { BetweenBreakpointsKey } from './types';
+export const MEDIA_CLASS_NAME_PREFIX = "media"
 
-export const MEDIA_CLASS_NAME_PREFIX = 'media';
-
 type GenerateRuleSetParams = {
-  media: string;
-  className: string;
-};
+  media: string
+  className: string
+}
 
 export const generateRuleSet = ({
   media,
-  className
+  className,
 }: GenerateRuleSetParams) => {
-  return `@media ${media}{.${className}{display:none;}}`;
-};
+  return `@media ${media}{.${className}{display:none!important;}}`
+}
 
 export const keys = <T extends object>(obj: T): Array<keyof T> =>
-  Object.keys(obj) as Array<keyof T>;
+  Object.keys(obj) as Array<keyof T>

New alerts

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

61779

increased by10.48%

Worsened metrics

Dev dependency count

27

increased by58.82%

Number of package files

17

decreased by-41.38%

Lines of code

417

decreased by-66.64%

Number of low quality alerts

3

increased by200%

Number of medium supply chain risk alerts

1

increased byInfinity%

Is type module

No

No dependency changes