@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
16 lines • 889 B
JavaScript
import { useContainerQuery } from '@awsui/component-toolkit';
import { getMatchingBreakpoint } from '../../breakpoints';
/**
* Re-renders the component when the breakpoint for the component changes. Scopes the re-renders to the specific
* breakpoints you want to break at. "default" is always included as a fallback, so ["xs"] would trigger for
* "default" and "xs".
*
* @param triggers The relevant breakpoints to trigger for.
*/
export function useContainerBreakpoints(triggers) {
// triggers.join() gives us a stable value to use for the dependencies argument
const triggersDep = triggers === null || triggers === void 0 ? void 0 : triggers.join();
// eslint-disable-next-line react-hooks/exhaustive-deps
return useContainerQuery(rect => getMatchingBreakpoint(rect.contentBoxWidth, triggers), [triggersDep]);
}
//# sourceMappingURL=use-container-breakpoints.js.map