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