Converts Chakra responsive syntax (array or object) to sizes for use with image elements.

useChakraResponsiveImageSizes.jsx

import { useTheme } from "@chakra-ui/react";
import { objectToArrayNotation } from "@chakra-ui/utils";

export default function useChakraResponsiveImageSizes(sizes) {
  const theme = useTheme();
  const details = theme.__breakpoints.details;

  if (!sizes) {
    return null;
  }

  if (typeof sizes === "string") {
    return sizes;
  }

  if (!Array.isArray(sizes)) {
    sizes = objectToArrayNotation(sizes);
  }

  const last = sizes.pop();

  return sizes
    .map((size, index) =>
      size && details[index]
        ? `(max-width: ${details[index].maxW}) ${size}`
        : null
    )
    .concat([last])
    .filter(Boolean)
    .join(", ");
}

Usage

function MyComponent({ sizes, ...props }) {
  return <NextImage sizes={useChakraResponsiveImageSizes(sizes)} {...props} />
}