Get boolean for screen size

[ivanjeremic]

Is there any way to get true back if the current breakpoint is active?

// First, create an alias for breakpoints
const breakpoints = ["30em", "48em", "62em", "80em"];
// aliases
breakpoints.sm = breakpoints[0];
breakpoints.md = breakpoints[1];
breakpoints.lg = breakpoints[2];
breakpoints.xl = breakpoints[3];

[ljosberinn]

https://next.chakra-ui.com/docs/hooks/use-breakpoint-value#usage

const breakpoint = useBreakpointValue({ base: "base", sm: "sm", lg: "lg", xl: "xl" })

const isBase = breakpoint === 'sm';
// etc

[ljosberinn]

sorry not following, can you rephrase?

[ivanjeremic]

I'm not able to import useBreakpointValue hook, now I saw this is a separate package on npm called @chakra-ui/media-query what is the reason this is separated? thanks

[ljosberinn]

this is v1, where you can import it from @core, v0.8 doesn't have it

[ivanjeremic]

So should I update my core to v1?

[ljosberinn]

I'd recommend using v1 if you're starting a project or aren't far in, yes. You can find migration docs in the link from above too: https://next.chakra-ui.com/docs/getting-started

[ivanjeremic]

@ljosberinn I would like to add some conditionals in the props based on the current breakpoint and the methods you showed me and something I found online, but both methods I tried seem to not work correctly always.

// Method: 1 >> (This works perfectly)

<Grid
      templateColumns={{
        sm: "1fr",
        md: "1fr",
        lg: "300px 1fr 300px",
        xl: "300px 1fr 300px",
      }}
      templateRows={{
        sm: "20px 1fr 1fr",
        md: "20px 1fr 1fr",
        lg: "100px 1fr 1fr",
        xl: "100px 1fr 1fr",
      }}
      w="100%"
      h="100vh"
>
  boxcontent
</Grid>

// Method: 2 >> (This is buggy, worked the first time now it does not switch the fontSize anymore) <<

const breakpoint = useBreakpointValue({
    sm: "sm",
    md: "md",
    lg: "lg",
    xl: "xl",
  });

  const isSM = breakpoint === "sm";
  const isMD = breakpoint === "md";
  const isLG = breakpoint === "lg";
  const isXL = breakpoint === "xl";

<Heading
    fontSize={ isSM ? "31px" : isMD ? "31px" : isLG ? "31px" : isXL ? "31px" : "" }
>
    Some Heading
</Heading>

// Here the same as above but it seems to work correctly
<Box hidden={isLG ? true : isXL ? true : ""}>
    <BurgerMenu />
</Box>

// This does not work correctly on the small breakboints
<Box
   mb={{ sm: "2em", md: "2em", lg: "2em", xl: "2em" }}
   pt={{ sm: "4em", md: "4em", lg: "4em", xl: "4em" }}
   pl={{ sm: "2em", md: "2em", lg: "2em", xl: "2em" }}
>
 MyBox
</Box>

So what would you generally recommend, is the way I try to do this in v1 the correct way? Thanks.

[ljosberinn]

re method 2: you always pass 31px so... what should it update? 🤔

// Here the same as above but it seems to work correctly
<Box hidden={isLG ? true : isXL ? true : ""}>
    <BurgerMenu />
</Box>

that's the same as

<Box hidden={isLG || isXL}>

and can you clarify what does not work correcly on small breakpoints means? A sandbox would be nice.

[ivanjeremic]

re method 2: you always pass 31px so... what should it update? 🤔

// Here the same as above but it seems to work correctly
<Box hidden={isLG ? true : isXL ? true : ""}>
    <BurgerMenu />
</Box>

that's the same as

<Box hidden={isLG || isXL}>

and can you clarify what does not work correcly on small breakpoints means? A sandbox would be nice.

This is only a typo in the example I sent here.

Yes I will try to prepare a CodeSandbox

[ivanjeremic]

Somewhat hard to prepare a CodeSanbox but I will try but it seems using something like size={ isSM ? "80px" : isMD ? "80px" : isLG ? "200px" : isXL ? "1080px" : "1080px" } Is something ChakraUI does not like and does not understand but it is valid JavaScript

[ljosberinn]

You're generally missing the base breakpoint, which is anything below sm. Chakra doesn't do anything special with your JS. If it's valid JS, then it will work.

Here's a sandbox with your code and it works just fine. https://codesandbox.io/s/headless-thunder-4l51i?file=/src/App.js