@chakra-ui/media-query - npm Package Compare versions

		@@ -1,99 +0,7 @@
		interface UseQueryProps {
		breakpoint?: string;
		below?: string;
		above?: string;
		}
		declare function useQuery(props: UseQueryProps): string;

		declare type UseMediaQueryOptions = {
		fallback?: boolean \| boolean[];
		ssr?: boolean;
		};
		/**
		* React hook that tracks state of a CSS media query
		*
		* @param query the media query to match
		* @param options the media query options { fallback, ssr }
		*
		* @see Docs https://chakra-ui.com/docs/hooks/use-media-query
		*/
		declare function useMediaQuery(query: string \| string[], options?: UseMediaQueryOptions): boolean[];

		/**
		* React hook used to get the user's animation preference.
		*
		* @see Docs https://chakra-ui.com/docs/hooks/use-prefers-reduced-motion
		*/
		declare function usePrefersReducedMotion(options?: UseMediaQueryOptions): boolean;
		/**
		* React hook for getting the user's color mode preference.
		*/
		declare function useColorModePreference(options?: UseMediaQueryOptions): "dark" \| "light" \| undefined;

		declare type UseBreakpointOptions = {
		ssr?: boolean;
		fallback?: string;
		};
		/**
		* React hook used to get the current responsive media breakpoint.
		*
		* For SSR, you can use a package like [is-mobile](https://github.com/kaimallea/isMobile)
		* to get the default breakpoint value from the user-agent.
		*/
		declare function useBreakpoint(arg?: string \| UseBreakpointOptions): string;

		/**
		* React hook for getting the value for the current breakpoint from the
		* provided responsive values object.
		*
		* For SSR, you can use a package like [is-mobile](https://github.com/kaimallea/isMobile)
		* to get the default breakpoint value from the user-agent
		*
		* @example
		* const width = useBreakpointValue({ base: '150px', md: '250px' })
		*
		* @see Docs https://chakra-ui.com/docs/hooks/use-breakpoint-value
		*/
		declare function useBreakpointValue<T = any>(values: Partial<Record<string, T>> \| T[], arg?: UseBreakpointOptions \| string): T \| undefined;

		interface ShowProps {
		/**
		* A custom css media query that determines when the `children` are rendered.
		* Will render `children` if that query resolves to `true`.
		*/
		breakpoint?: string;
		/**
		* A value from the `breakpoints` section in the theme. Will render `children`
		* from that breakpoint and below. Default breakpoint values: `sm`, `md`, `lg`, `xl`, `2xl`.
		*/
		below?: string;
		/**
		* A value from the `breakpoints` section in the theme. Will render `children`
		* from that breakpoint and above. Default breakpoint values: `sm`, `md`, `lg`, `xl`, `2xl`.
		*/
		above?: string;
		ssr?: boolean;
		children?: React.ReactNode;
		}
		/**
		* `Show` wraps a component to render if the provided media query matches.
		*
		* @see Docs https://chakra-ui.com/docs/components/show-hide
		*/
		declare function Show(props: ShowProps): JSX.Element;
		declare namespace Show {
		var displayName: string;
		}

		declare type HideProps = ShowProps;
		/**
		* `Hide` wraps a component to not render if the provided media query matches.
		*
		* @see Docs https://chakra-ui.com/docs/components/show-hide
		*/
		declare function Hide(props: HideProps): JSX.Element;
		declare namespace Hide {
		var displayName: string;
		}

		export { Hide, HideProps, Show, ShowProps, UseBreakpointOptions, UseMediaQueryOptions, UseQueryProps, useBreakpoint, useBreakpointValue, useColorModePreference, useMediaQuery, usePrefersReducedMotion, useQuery };
		export { UseQueryProps, useQuery } from './media-query.js';
		export { useColorModePreference, usePrefersReducedMotion } from './media-query.hook.js';
		export { UseBreakpointOptions, useBreakpoint } from './use-breakpoint.js';
		export { UseMediaQueryOptions, useMediaQuery } from './use-media-query.js';
		export { useBreakpointValue } from './use-breakpoint-value.js';
		export { Show, ShowProps } from './show.js';
		export { Hide, HideProps } from './hide.js';

package.json

		{
		"name": "@chakra-ui/media-query",
		"version": "3.2.8",
		"version": "3.2.9",
		"description": "A React hook for changing properties or visibility of a component based on css media query",
		@@ -17,3 +17,3 @@ "keywords": [
		"license": "MIT",
		"main": "dist/index.cjs.js",
		"main": "dist/index.js",
		"files": [
		@@ -34,9 +34,7 @@ "dist"
		"dependencies": {
		"@chakra-ui/react-env": "2.0.11",
		"@chakra-ui/breakpoint-utils": "2.0.5"
		"@chakra-ui/react-env": "2.0.12",
		"@chakra-ui/breakpoint-utils": "2.0.6",
		"@chakra-ui/shared-utils": "2.0.4"
		},
		"devDependencies": {
		"@chakra-ui/shared-utils": "2.0.3",
		"@chakra-ui/system": "2.3.2",
		"@chakra-ui/theme": "2.2.0",
		"@types/react-frame-component": "^4.1.1",
		@@ -47,3 +45,5 @@ "jest-matchmedia-mock": "^1.1.0",
		"react": "^18.0.0",
		"clean-package": "2.1.1"
		"clean-package": "2.1.1",
		"@chakra-ui/system": "2.3.6",
		"@chakra-ui/theme": "2.2.3"
		},
		@@ -54,9 +54,18 @@ "peerDependencies": {
		},
		"module": "dist/index.esm.js",
		"clean-package": "../../../clean-package.config.json",
		"tsup": {
		"clean": true,
		"target": "es2019",
		"format": [
		"cjs",
		"esm"
		]
		},
		"module": "dist/index.mjs",
		"types": "dist/index.d.ts",
		"exports": {
		".": {
		"import": "./dist/index.esm.js",
		"require": "./dist/index.cjs.js",
		"types": "./dist/index.d.ts"
		"types": "./dist/index.d.ts",
		"import": "./dist/index.mjs",
		"require": "./dist/index.js"
		},
		@@ -66,8 +75,8 @@ "./package.json": "./package.json"
		"scripts": {
		"build": "JSX=1 tsup src/index.ts --dts",
		"build": "tsup src --dts",
		"dev": "pnpm build:fast -- --watch",
		"clean": "rimraf dist .turbo",
		"typecheck": "tsc --noEmit",
		"build:fast": "JSX=1 tsup src/index.ts"
		"build:fast": "tsup src"
		}
		}

dist/index.cjs.js

dist/index.esm.js

New alerts

Improved metrics

Worsened metrics

Dependency changes