useCoralBreakpoints

A hook to provide breakpoint media query functionality to a component / page.

Import

import { useCoralBreakpoints } from '@krakentech/coral';

Basic usage

When using a useCoralBreakpoints hook inline, for switching text as below, or for interacting with third-party components outside of the Coral ecosystem, you should make use of the isClient helper to ensure that the render waits until the client is available before attempting to build the DOM.

This helps prevent hydration errors, as isMaxSm is false in an SSR context, given there is no browser context available, so the underlying react-window will always return false. On desktop this is fine, as the condition being false means the content is correct, however, loading on a mobile device without isClient will throw a hydration error, as it will load the desktop text on the server, then hydrate with the mobile text on the client.

import { useIsClient } from '@krakentech/utils';
 
export function SomeComponent() {
    const { isMaxSm } = useCoralBreakpoints();
    const isClient = useIsClient();
 
    return isClient && isMaxSm
        ? 'useCoralBreakpoints hook: mobile 📱'
        : 'useCoralBreakpoints hook: desktop 🖥️';
}

Content

A common pattern for showing and hiding content depending on screen size is something like the below.

{
    isMinSm && <SomeDesktopComponent />;
}

However, we recommend making use of the Visibility atom with the display="none" property. This will retain the content in the DOM to prevent hydration errors, however, will remove the content from the flow entirely so it cannot be found by screen readers.

<Visibility display={{ base: "none", sm: "block" }}>
    <SomeDesktopContent />
</Visibility>