Recipes

Media State

useWindowQuery can be used to handle responsive layouts with React state. For example, take a grid with one row and three columns:

<Grid bgColor="#feccfe" borderRadius={8} textCenter>
    <Row>
        <Col>🌲</Col>
        <Col>🍄</Col>
        <Col>🌻</Col>
    </Row>
</Grid>

We could query the window width to determine if it is at or below the default small breakpoint:

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

Using this, we could, for example, conditionally render the second (mushroom 🍄) column on relatively small screens, conditionally render the third (sunflower 🌻) column on relatively large screens, and conditionally set a left/right margin on the grid overall based on the same logic. If the query test is written correctly (i.e. the hook receives correct values), you will simply receive a boolean that is easy to work with.

Putting it all together:

import { breakpoints } from 'shakti-lib';
const Component = () => {
    const isSmall = useWindowQuery("WidthBelow", breakpoints.sm);
    return(
        <Grid mx={isSmall ? 10 : 20} bgColor="#feccfe" borderRadius={8} textCenter>
            <Row>
                <Col>🌲</Col>
                {isSmall && <Col>🍄</Col>}
                {!isSmall && <Col>🌻</Col>}
            </Row>
        </Grid>
    );
};

If you are on a relatively small screen width, you will see the mushroom. On a relatively large screen width, you will see the sunflower!

Conditional Side Effects

The window query can also be used to control component side effects, for example:

useEffect(() => {
    // logic dependent on breakpoint state change here
}, [isSmall]);

Overriding Breakpoints

The default Shakti breakpoints can be overwritten by creating a higher-order export using object composition with the spread operator. As an example, let's say you wanted to

1. overwrite the value for the small breakpoint (sm), and
2. create a new breakpoint for extra-extra-large screen sizes called xxl:

// 📁 shadowedBreakpoints.ts
import { breakpoints } from 'shakti-lib';
const shadowedBreakpoints = {...breakpoints, sm: 700, xxl: 1600}
export default shadowedBreakpoints;

Now, they can be imported in another file.

import shadowedBreakpoints from "/path/to/shadowedBreakpoints";
// use your new breakpoints
const sm = shadowedBreakpoints.sm;
const xxl = shadowedBreakpoints.xxl;