@yamada-ui/react/dist/esm/hooks/use-breakpoint/use-breakpoint-value.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { useSystem } from "../../core/system/system-provider.js";
import { useBreakpoint } from "./use-breakpoint.js";
import { useMemo } from "react";

//#region src/hooks/use-breakpoint/use-breakpoint-value.ts
/**
* `useBreakpointValue` is a custom hook that returns the value of the current breakpoint from the provided object.
* This hook monitors changes in the window size and returns the appropriate value.
*
* @see https://yamada-ui.com/docs/hooks/use-breakpoint-value
*/
const useBreakpointValue = (values) => {
	const system = useSystem();
	const breakpoint = useBreakpoint();
	return useMemo(() => getBreakpointValue(values)(system, breakpoint), [
		values,
		system,
		breakpoint
	]);
};
const getBreakpointValue = (values = {}) => (system, breakpoint) => {
	const breakpoints = system.breakpoints.keys;
	if (!breakpoints.length) console.warn("getBreakpointValue: `breakpoints` is undefined.");
	const currentIndex = breakpoints.indexOf(breakpoint);
	for (let i = currentIndex; 0 < i; i--) {
		const nextBreakpoint = breakpoints[i];
		if (nextBreakpoint && values.hasOwnProperty(nextBreakpoint)) return values[nextBreakpoint];
	}
	return values.base;
};

//#endregion
export { getBreakpointValue, useBreakpointValue };
//# sourceMappingURL=use-breakpoint-value.js.map