Chakra UIのuseBreakpointValueでProps全体を柔軟に扱う方法

Chakraのサンプルにある

1const variant = useBreakpointValue({ base: "outline", md: "solid" })

だと柔軟性が伝わらないのですが、結局のところブレークポイント単位に特定の定義した値を返すことができるので、このような形でPropsをまとめて定義することもできて便利です。

1const Component: React.VFC = () => {
2  const imageprops = useBreakpointValue({
3    base: { src: "xxxx.sp.png", width: 380, height: 397 },
4    md: { src: "xxxx.png", width: 710, height: 350 }
5  })
6
7  return <Box>
8    <Image { ...imageprops } alt="any image" />
9  </Box>
10}
11
12export default Component;

無理のあるレスポンシブ対応をしたいとき（しないほうが良いですが）に活躍したりします。

• useBreakpointValue - Chakra UI