useContainerQuery hook or containerSize property

[VaZark]

With Container Queries now being implemented in all major browsers, it'd great to have custom components define their own breakpoint. This allows custom components to be self-contained and truly modular.

One way would be to introduce a useContainerQueryHook similar to the media query. Box and other native components can make use of a new property containerSize to avoid a breaking change.

[timkindberg]

For now you can do this. Give each child you want to style a class (or in my case a data-attr) and then target it using vanilla container queries syntax in the sx prop.

https://codesandbox.io/s/naughty-williams-pk2khp?file=/src/App.js

<Box
  sx={{
    containerType: "inline-size",
    containerName: "my-container",
    "@container my-container (min-width: 0px)": {
      "[data-container]": { p: 6, bg: "green.100" },
      "[data-text]": { fontSize: "xs" }
    },
    "@container my-container (min-width: 480px)": {
      "[data-container]": { p: 12, bg: "gray.100" },
      "[data-text]": { fontSize: "md" }
    },
    "@container my-container (min-width: 768px)": {
      "[data-container]": { bg: "red.100" },
      "[data-text]": { fontSize: "3xl", fontWeight: 500 }
    }
  }}
>
  <Stack data-container>
    <Text data-text>Some Text</Text>
  </Stack>
</Box>

[timkindberg]

I realized you can also write it like this, with the styles located on the element they are styling. A bit better having the styles colocated.

import { ChakraProvider, Box, Stack, Text } from "@chakra-ui/react";

export default function App() {
  return (
    <div className="App">
      <ChakraProvider>
        <Box
          sx={{
            containerType: "inline-size",
          }}
        >
          <Stack
            sx={{
              "@container (min-width: 0px)": {
                "&": { p: 6, bg: "green.100" },
              },
              "@container (min-width: 480px)": {
                "&": { p: 12, bg: "gray.100" },
              },
              "@container (min-width: 768px)": {
                "&": { bg: "red.100" },
              },
            }}
          >
            <Text
              sx={{
                "@container (min-width: 0px)": {
                  "&": { fontSize: "xs" },
                },
                "@container (min-width: 480px)": {
                  "&": { fontSize: "md" },
                },
                "@container (min-width: 768px)": {
                  "&": { fontSize: "3xl", fontWeight: 500 },
                },
              }}
            >
              Some Text
            </Text>
          </Stack>
        </Box>
      </ChakraProvider>
    </div>
  );
}

[jamesarosen]

One of the reasons I like react-container-query is that I can use a container-query not just for CSS, but for JS. That's important if I'm working with another (non-React) library like D3 and need to change properties based on, e.g. the inline-size of the chart:

const query = {
  'less-than-600': {
    maxWidth: 599,
  },
  'at-least-600': {
    minWidth: 600,
  },
};

const [params, containerRef] = useContainerQuery(query)

const dateFormatter = useMemo(() => {
  const style = params['less-than-600'] ? { month: 'narrow' } : { month: 'long' }
  return new Intl.DateTimeFormat('default', style)
}, params)

As long as Chakra components properly forward their refs, it's possible to do this:

const [params, containerRef] = useContainerQuery(query)

<Box ref={containerRef} className={classnames(params)} pl={4} pr={2}>
</Box>