react-responsive - npm Package Compare versions

Comparing version 9.0.2 to 10.0.0-beta.1

package.json

 {
   "name": "react-responsive",
   "description": "Media queries in react for responsive design",
-  "version": "9.0.2",
+  "version": "10.0.0-beta.1",
   "homepage": "http://github.com/contra/react-responsive",
@@ -12,4 +12,5 @@ "repository": {
   "license": "MIT",
-  "main": "./dist/react-responsive.js",
-  "types": "./types/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
   "sideEffects": false,
@@ -44,8 +45,9 @@ "files": [
   "devDependencies": {
+    "@rollup/plugin-typescript": "^11.0.0",
     "@types/chai": "^4.3.1",
     "@types/hyphenate-style-name": "^1.0.0",
-    "@types/jsdom": "^20.0.0",
+    "@types/jsdom": "^21.0.0",
     "@types/match-media-mock": "^0.1.5",
     "@types/matchmediaquery": "^0.3.0",
-    "@types/mocha": "^9.0.0",
+    "@types/mocha": "^10.0.0",
     "@types/react": "^18.0.4",
@@ -61,15 +63,15 @@ "@types/react-dom": "^18.0.0",
     "gh-pages": "^4.0.0",
-    "jsdom": "^20.0.0",
+    "jsdom": "^21.0.0",
     "match-media-mock": "^0.1.1",
     "mocha": "^10.0.0",
+    "prettier": "^2.8.7",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "rollup": "^3.10.0",
+    "rollup-plugin-node-externals": "^5.1.0",
     "should": "^13.2.1",
-    "sinon": "^14.0.0",
-    "ts-loader": "^9.2.8",
+    "sinon": "^15.0.0",
     "ts-node": "^10.0.0",
     "typedoc": "^0.23.14",
-    "typescript": "^4.8.3",
-    "webpack": "^5.72.0",
-    "webpack-cli": "^4.9.2"
+    "typescript": "^5.0.0"
   },
@@ -79,11 +81,11 @@ "scripts": {
     "postpublish": "npm run tag && npm run docs",
-    "build:umd": "cross-env BUILD_MODE=umd webpack",
-    "build:umd-min": "cross-env BUILD_MODE=umd-min webpack",
-    "build:types": "tsc --outDir ./dist --declaration --emitDeclarationOnly",
-    "build": "npm run build:umd && npm run build:umd-min && npm run build:types",
+    "prebuild": "npm run clean",
+    "build:types": "tsc --outDir ./dist/types --declaration --emitDeclarationOnly",
+    "build:lib": "rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript",
+    "build": "npm run build:lib && npm run build:types",
     "build:watch": "npm run build -- --watch",
     "clean": "rimraf dist",
     "tag": "git tag -a \"v$npm_package_version\" -m \"tag version $npm_package_version\" && git push origin master --tags",
-    "lint": "eslint --ext=ts,tsx src test --fix",
-    "test": "npx mocha -R spec --require ts-node/register ./test/setup.js ./test/setup.js test/*_test.{ts,tsx}",
+    "lint": "eslint --ext=ts,tsx . src test --fix && prettier . src test --write",
+    "test": "npx mocha -R spec --require ts-node/register ./test/setup.js test/*_test.{ts,tsx}",
     "docs": "typedoc src/index.ts && gh-pages -d docs"
@@ -90,0 +92,0 @@ },

README.md

@@ -17,3 +17,2 @@ # react-responsive [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url]
 </tr>
-</tr>
 <tr>
@@ -51,10 +50,12 @@ <td colspan='2'><a href='http://contra.io/react-responsive/'>Demo</a></td>
 
-  return <div>
-    <h1>Device Test!</h1>
-    {isDesktopOrLaptop && <p>You are a desktop or laptop</p>}
-    {isBigScreen && <p>You  have a huge screen</p>}
-    {isTabletOrMobile && <p>You are a tablet or mobile phone</p>}
-    <p>Your are in {isPortrait ? 'portrait' : 'landscape'} orientation</p>
-    {isRetina && <p>You are retina</p>}
-  </div>
+  return (
+    <div>
+      <h1>Device Test!</h1>
+      {isDesktopOrLaptop && <p>You are a desktop or laptop</p>}
+      {isBigScreen && <p>You have a huge screen</p>}
+      {isTabletOrMobile && <p>You are a tablet or mobile phone</p>}
+      <p>Your are in {isPortrait ? 'portrait' : 'landscape'} orientation</p>
+      {isRetina && <p>You are retina</p>}
+    </div>
+  )
 }
@@ -80,5 +81,3 @@ ```
       {(matches) =>
-        matches
-          ? <p>You are retina</p>
-          : <p>You are not retina</p>
+        matches ? <p>You are retina</p> : <p>You are not retina</p>
       }
@@ -113,7 +112,3 @@ </MediaQuery>
 
-  return (
-    <div>
-      ...
-    </div>
-  )
+  return <div>...</div>
 }
@@ -144,4 +139,4 @@ ```
   const isDesktopOrLaptop = useMediaQuery(
-     { minDeviceWidth: 1224 },
-     { deviceWidth: 1600 } // `device` prop
+    { minDeviceWidth: 1224 },
+    { deviceWidth: 1600 } // `device` prop
   )
@@ -151,3 +146,3 @@
     <div>
-      {isDesktopOrLaptop &&
+      {isDesktopOrLaptop && (
         <p>
@@ -157,3 +152,3 @@ this will always get rendered even if device is shorter than 1224px,
         </p>
-      }
+      )}
     </div>
@@ -223,3 +218,2 @@ )
 const Example = () => {
-
   const handleMediaQueryChange = (matches) => {
@@ -229,10 +223,8 @@ // matches will be true or false based on the value for the media query
   const isDesktopOrLaptop = useMediaQuery(
-    { minWidth: 1224 }, undefined,  handleMediaQueryChange
-  );
+    { minWidth: 1224 },
+    undefined,
+    handleMediaQueryChange
+  )
 
-  return (
-    <div>
-      ...
-    </div>
-  )
+  return <div>...</div>
 }
@@ -246,3 +238,2 @@ ```
 const Example = () => {
-
   const handleMediaQueryChange = (matches) => {
@@ -299,9 +290,9 @@ // matches will be true or false based on the value for the media query
 ```js
-import { useMediaQuery } from "react-responsive"
+import { useMediaQuery } from 'react-responsive'
 
 const useDesktopMediaQuery = () =>
-  useMediaQuery({ query: "(min-width: 1280px)" })
+  useMediaQuery({ query: '(min-width: 1280px)' })
 
 const useTabletAndBelowMediaQuery = () =>
-  useMediaQuery({ query: "(max-width: 1279px)" })
+  useMediaQuery({ query: '(max-width: 1279px)' })
 
@@ -321,3 +312,2 @@ const Desktop = ({ children }) => {
 
-
 ## Browser Support
@@ -324,0 +314,0 @@

src/@types/shallow-equal.d.ts

@@ -9,7 +9,10 @@ declare module 'shallow-equal' {
     | symbol
-    | null;
-  export function shallowEqualArrays(arr1: primitives[], arr2: primitives[]): boolean;
+    | null
+  export function shallowEqualArrays(
+    arr1: primitives[],
+    arr2: primitives[]
+  ): boolean
 
   interface primitiveObject {
-    [key: string]: primitives;
+    [key: string]: primitives
   }
@@ -19,3 +22,3 @@ export function shallowEqualObjects(
     obj2: primitiveObject | undefined
-  ): boolean;
+  ): boolean
 }

src/Component.ts

@@ -1,16 +0,15 @@
-import useMediaQuery from './useMediaQuery';
-import { ReactNode, ReactElement, FC, CSSProperties } from 'react';
-import { MediaQueryAllQueryable, MediaQueryMatchers } from './types';
+import useMediaQuery from './useMediaQuery'
+import { ReactNode, ReactElement, FC, CSSProperties } from 'react'
+import { MediaQueryAllQueryable, MediaQueryMatchers } from './types'
 
 interface MediaQueryProps extends MediaQueryAllQueryable {
   component?: ReactNode
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  children?: ReactNode | ((matches: boolean) => ReactNode);
-  query?: string;
-  style?: CSSProperties;
-  className?: string;
-  device?: MediaQueryMatchers;
-  values?: Partial<MediaQueryMatchers>;
-  onBeforeChange?: (_matches: boolean) => void;
-  onChange?: (_matches: boolean) => void;
+  children?: ReactNode | ((matches: boolean) => ReactNode)
+  query?: string
+  style?: CSSProperties
+  className?: string
+  device?: MediaQueryMatchers
+  values?: Partial<MediaQueryMatchers>
+  onBeforeChange?: (_matches: boolean) => void
+  onChange?: (_matches: boolean) => void
 }
@@ -25,10 +24,10 @@
 }) => {
-  const matches = useMediaQuery(settings, device, onChange);
+  const matches = useMediaQuery(settings, device, onChange)
 
   if (typeof children === 'function') {
-    return children(matches) as ReactElement;
+    return children(matches) as ReactElement
   }
-  return matches ? children as ReactElement : null;
-};
+  return matches ? (children as ReactElement) : null
+}
 
-export default MediaQuery;
+export default MediaQuery

src/Context.ts

 import { createContext } from 'react'
 import { MediaQueryAllQueryable } from './types'
 
-const Context = createContext<Partial<MediaQueryAllQueryable> | undefined>(undefined)
+const Context = createContext<Partial<MediaQueryAllQueryable> | undefined>(
+  undefined
+)
 
 export default Context

src/index.ts

@@ -6,8 +6,3 @@ import useMediaQuery from './useMediaQuery'
 
-export {
-  MediaQuery as default,
-  useMediaQuery,
-  toQuery,
-  Context
-}
+export { MediaQuery as default, useMediaQuery, toQuery, Context }
 
@@ -14,0 +9,0 @@ export type {

src/mediaQuery.ts

 import PropTypes from 'prop-types'
 
-const stringOrNumber = PropTypes.oneOfType([
-  PropTypes.string,
-  PropTypes.number
-])
+const stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 
@@ -25,11 +22,5 @@ // media types
 const matchers = {
-  orientation: PropTypes.oneOf([
-    'portrait',
-    'landscape'
-  ]),
+  orientation: PropTypes.oneOf(['portrait', 'landscape']),
 
-  scan: PropTypes.oneOf([
-    'progressive',
-    'interlace'
-  ]),
+  scan: PropTypes.oneOf(['progressive', 'interlace']),
 
@@ -36,0 +27,0 @@ aspectRatio: PropTypes.string,

src/types.ts

 export interface MediaQueryTypes {
-  all?: boolean;
-  grid?: boolean;
-  aural?: boolean;
-  braille?: boolean;
-  handheld?: boolean;
-  print?: boolean;
-  projection?: boolean;
-  screen?: boolean;
-  tty?: boolean;
-  tv?: boolean;
-  embossed?: boolean;
+  all?: boolean
+  grid?: boolean
+  aural?: boolean
+  braille?: boolean
+  handheld?: boolean
+  print?: boolean
+  projection?: boolean
+  screen?: boolean
+  tty?: boolean
+  tv?: boolean
+  embossed?: boolean
 }
 
-export type MediaQueryType = keyof MediaQueryTypes;
+export type MediaQueryType = keyof MediaQueryTypes
 
 export interface MediaQueryMatchers {
-  aspectRatio?: string;
-  deviceAspectRatio?: string;
-  height?: number | string;
-  deviceHeight?: number | string;
-  width?: number | string;
-  deviceWidth?: number | string;
-  color?: boolean;
-  colorIndex?: boolean;
-  monochrome?: boolean;
-  resolution?: number | string;
-  orientation?: 'portrait' | 'landscape';
-  scan?: 'progressive' | 'interlace';
-  type?: MediaQueryType;
+  aspectRatio?: string
+  deviceAspectRatio?: string
+  height?: number | string
+  deviceHeight?: number | string
+  width?: number | string
+  deviceWidth?: number | string
+  color?: boolean
+  colorIndex?: boolean
+  monochrome?: boolean
+  resolution?: number | string
+  orientation?: 'portrait' | 'landscape'
+  scan?: 'progressive' | 'interlace'
+  type?: MediaQueryType
 }
 
 export interface MediaQueryFeatures extends MediaQueryMatchers {
-  minAspectRatio?: string;
-  maxAspectRatio?: string;
+  minAspectRatio?: string
+  maxAspectRatio?: string
 
-  minDeviceAspectRatio?: string;
-  maxDeviceAspectRatio?: string;
+  minDeviceAspectRatio?: string
+  maxDeviceAspectRatio?: string
 
-  minHeight?: number | string;
-  maxHeight?: number | string;
+  minHeight?: number | string
+  maxHeight?: number | string
 
-  minDeviceHeight?: number | string;
-  maxDeviceHeight?: number | string;
+  minDeviceHeight?: number | string
+  maxDeviceHeight?: number | string
 
-  minWidth?: number | string;
-  maxWidth?: number | string;
+  minWidth?: number | string
+  maxWidth?: number | string
 
-  minDeviceWidth?: number | string;
-  maxDeviceWidth?: number | string;
+  minDeviceWidth?: number | string
+  maxDeviceWidth?: number | string
 
-  minColor?: number;
-  maxColor?: number;
+  minColor?: number
+  maxColor?: number
 
-  minColorIndex?: number;
-  maxColorIndex?: number;
+  minColorIndex?: number
+  maxColorIndex?: number
 
-  minMonochrome?: number;
-  maxMonochrome?: number;
+  minMonochrome?: number
+  maxMonochrome?: number
 
-  minResolution?: number | string;
-  maxResolution?: number | string;
+  minResolution?: number | string
+  maxResolution?: number | string
 }
 
-export interface MediaQueryAllQueryable extends MediaQueryFeatures, MediaQueryTypes {}
+export interface MediaQueryAllQueryable
+  extends MediaQueryFeatures,
+    MediaQueryTypes {}

src/useMediaQuery.ts

@@ -10,8 +10,9 @@ import { useRef, useEffect, useContext, useState } from 'react'
 type MediaQuerySettings = Partial<MediaQueryAllQueryable & { query?: string }>
-type HyphenateKeyTypes = MediaQueryMatchers | MediaQueryAllQueryable;
+type HyphenateKeyTypes = MediaQueryMatchers | MediaQueryAllQueryable
 
-const makeQuery = (settings: MediaQuerySettings) => settings.query || toQuery(settings)
+const makeQuery = (settings: MediaQuerySettings) =>
+  settings.query || toQuery(settings)
 
-const hyphenateKeys = (obj?: HyphenateKeyTypes)  => {
-  type K = keyof HyphenateKeyTypes;
+const hyphenateKeys = (obj?: HyphenateKeyTypes) => {
+  type K = keyof HyphenateKeyTypes
 
@@ -24,3 +25,3 @@ if (!obj) return undefined
     return result
-  }, {} as Record<string, typeof obj[K]>)
+  }, {} as Record<string, (typeof obj)[K]>)
 }
@@ -38,7 +39,9 @@
 
-const useDevice = (deviceFromProps?: MediaQueryMatchers): Partial<MediaQueryAllQueryable> | undefined => {
+const useDevice = (
+  deviceFromProps?: MediaQueryMatchers
+): Partial<MediaQueryAllQueryable> | undefined => {
   const deviceFromContext = useContext(Context)
   const getDevice = () =>
     hyphenateKeys(deviceFromProps) || hyphenateKeys(deviceFromContext)
-  const [ device, setDevice ] = useState(getDevice)
+  const [device, setDevice] = useState(getDevice)
 
@@ -50,3 +53,3 @@ useEffect(() => {
     }
-  }, [ deviceFromProps, deviceFromContext ])
+  }, [deviceFromProps, deviceFromContext])
 
@@ -58,3 +61,3 @@ return device
   const getQuery = () => makeQuery(settings)
-  const [ query, setQuery ] = useState(getQuery)
+  const [query, setQuery] = useState(getQuery)
 
@@ -66,3 +69,3 @@ useEffect(() => {
     }
-  }, [ settings ])
+  }, [settings])
 
@@ -74,3 +77,3 @@ return query
   const getMatchMedia = () => matchMedia(query, device || {}, !!device)
-  const [ mq, setMq ] = useState(getMatchMedia)
+  const [mq, setMq] = useState(getMatchMedia)
   const isUpdate = useIsUpdate()
@@ -90,3 +93,3 @@
     }
-  }, [ query, device ])
+  }, [query, device])
 
@@ -97,3 +100,3 @@ return mq
 const useMatches = (mediaQuery: MediaQueryList): boolean => {
-  const [ matches, setMatches ] = useState<boolean>(mediaQuery.matches)
+  const [matches, setMatches] = useState<boolean>(mediaQuery.matches)
 
@@ -110,3 +113,3 @@ useEffect(() => {
     }
-  }, [ mediaQuery ])
+  }, [mediaQuery])
 
@@ -116,3 +119,7 @@ return matches
 
-const useMediaQuery = (settings: MediaQuerySettings, device?: MediaQueryMatchers, onChange?: (_: boolean) => void) => {
+const useMediaQuery = (
+  settings: MediaQuerySettings,
+  device?: MediaQueryMatchers,
+  onChange?: (_: boolean) => void
+) => {
   const deviceSettings = useDevice(device)
@@ -129,9 +136,12 @@ const query = useQuery(settings)
     }
-  }, [ matches ])
+  }, [matches])
 
-  useEffect(() => () => {
-    if (mq) {
-      mq.dispose()
-    }
-  }, [])
+  useEffect(
+    () => () => {
+      if (mq) {
+        mq.dispose()
+      }
+    },
+    []
+  )
 
@@ -138,0 +148,0 @@ return matches

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

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

Fixed alerts

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

Worsened metrics

Total package byte prevSize

57783

decreased by-73.85%

Dev dependency count

30

increased by3.45%

Number of package files

22

decreased by-24.14%

Lines of code

927

decreased by-60.97%

Number of lines in readme file

342

decreased by-2.84%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes