Media

Media Breakpoints

Shakti comes with default media breakpoints.

import { breakpoints } from 'shakti-lib';

They have values according to the following table:

The breakpoints can be shadowed (overwritten) if desired. For an example, see Recipes#Overriding-Breakpoints.

useWindowQuery Hook

Window width and height can be detected using the useWindowQuery hook, which has the following signature:

const useWindowQuery = (
  test: keyof typeof DimensionQuery,
  breakpoint: number,
): boolean | undefined => {};

• test accepts an enumerated string constant of the DimensionQuery enum, which can be any string of "WidthAbove", "WidthBelow", "HeightAbove", or "HeightBelow". These enum constants are declarative (the string names represent what they are testing), and the tests are inclusive (they are true if they also equal the breakpoint).
• breakpoint accepts a pixel value to test against. You could use the Shakti default breakpoints outlined above, or use your own custom breakpoint here.

It may make more sense in code. As a concrete example, if you'd like to check if the window width is less than or equal to the Shakti small (sm) breakpoint, you would have

import { breakpoints } from 'shakti-lib';
const smallWidth = useWindowQuery("WidthBelow", breakpoints.sm);

true is returned if the test passes (in this case, if the window width is equal to or below the small breakpoint), and false is returned otherwise. undefined is returned if the test parameters are invalid.

This hook allows you to query the window dimensions and do what you'd like with the information, such as control the state of a React component and adjust the render logic accordingly. For an example of doing this for responsive design, see Recipes#Media-State.