blog.unresolved.xyz
Fri Oct 15 2021

chakraのuseBreakpointValueでProps全体を柔軟に扱う

chakraのサンプルにある

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

だと柔軟性が伝わらないんだけど、結局の所ブレークポイント単位に特定の定義した値を返すことができるので、こんな感じでPropsをごそっと定義することもできて便利

const Component: React.VFC = () => {
  const imageprops = useBreakpointValue({
    base: { src: "xxxx.sp.png", width: 380, height: 397 },
    md: { src: "xxxx.png", width: 710, height: 350 }
  })

  return <Box>
    <Image { ...imageprops } alt="any image" />
  </Box>
}

export default Component;

無茶なレスポンシブ対応をしたいときとか(しないほうがいいけど)に活躍したりする

Author
Daisuke Tsuji

Daisuke Tsuji

フリーのWeb Developer。

RubyとかRailsを触ってる時間が多い。コーディングもマークアップもライティングもデザインもSEOもやるタイプ。

だいたいどれもだめ。業務委託のお仕事募集中。