使用MediaQuery检测多个断点

Question

I'm trying to detect multiple breakpoints on my application so that the columns generated on a Grid is dynamic. I'm able to achieve this but the code seems rather repetitive. Is there a way I can simplify my code further?

    const isMdUp = useMediaQuery(({ breakpoints }) => breakpoints.up('md'));
    const isSmUp = useMediaQuery(({ breakpoints }) => breakpoints.up('sm'));
    const isMdDown = useMediaQuery(({ breakpoints }) => breakpoints.down('md'));

    let imageListCol = 1;

    if (isMdUp) {
        imageListCol = 3;
    } else if (isSmUp && isMdDown) {
        imageListCol = 2;
    }
    
    return (
        <ImageList cols={imageListCol} gap={20}>
            ...
        </ImageList>
    )

Answer 1

Yes, you can remove one of them:

const isMdUp = useMediaQuery(({ breakpoints }) => breakpoints.up('md'));
const isSmUp = useMediaQuery(({ breakpoints }) => breakpoints.up('sm'));

// removing the isMdDown
// const isMdDown = useMediaQuery(({ breakpoints }) => breakpoints.down('md'));

let imageListCol = 1;

if (isMdUp) {
    imageListCol = 3;
} else if (isSmUp && !isMdUp) { // and we are going to use the opposite of isMdUp 
    imageListCol = 2;
}

return (
    <ImageList cols={imageListCol} gap={20}>
        ...
    </ImageList>
)