useResponsive

Hook for getting responsive window size.

By default Breakpoints are:

• xs:
• sm:
• md:
• lg:
• xl:

Demo

INFO

The component initialize useResponsive hook without param and displays screen size value.

Try to change window size to see how value changes.

Loading demo…

Show source code

import { useResponsive } from "../../../.."

export const UseResponsive = () => {
	const responsive = useResponsive();

	return <p>{JSON.stringify(responsive, null, 2)}</p>
}

Types

UseResponsiveKeys

export type UseResponsiveKeys<T extends UseResponsiveKeysType = UseResponsiveKeysType> = T extends UseResponsiveKeysType ? Extract<UseResponsiveKeysType, T> : never;

UseResponsiveBreakpoints

• @template T - The breakpoint key type inferred from the provided config.

Options accepted by {@link useResponsive}.

export type UseResponsiveBreakpoints<T extends UseResponsiveKeys> = {
	[k in T]: number | { value: number, condition: "<" | "<=" | ">" | ">=" }
};

UseResponsiveResult

• @template T - The breakpoint key type. Defaults to the keys of the built-in defaultConfig when no custom config is provided.

A record mapping each breakpoint key to a boolean indicating whether the current viewport matches that breakpoint. Returned by {@link useResponsive}.

export type UseResponsiveResult<T extends UseResponsiveKeys> = {
	[s in UseResponsiveKeys<T>]: boolean;
};