React-Responsive

React

Reactのライブラリです。useMediaQueryというメディアの幅を検知してくれるフックスがあったので便利そうだったからメモ

import { useMediaQuery } from "react-responsive";

const Hero = () => {
　const isSmall = useMediaQuery({ maxWidth: 440 });
  const isMobile = useMediaQuery({ maxWidth: 768 });
  const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 1024 });
  return (
        <Canvas>  
            <Model
           scale={isMobile ? 0.02 : 0.03}//メディアクエリに合わせてスケールを変化
            />
        </Canvas>
  );

export default Hero;

基本的にはロジックの部分に使い、見た目はcssのメディアクエリで変更した方がいいらしい。