使用媒体查询钩

这个 useMediaQuery 钩被设计为React应用中的响应设计. 它使组件能够适应不同的屏幕大小或者响应媒体查询的变化.

特征

• 动态媒体查询 : 接受任何有效的 CSS 媒体查询字符串 .
• SSR 兼容性 : 服务器侧渲染的安全性,因为它检查是否有可用性 window 对象.
• 高效和优化: 只有媒体查询匹配状态变化时更新组件状态.

安装

只安装当前钩

npm install @custom-react-hooks/use-media-query

或者说

yarn add @custom-react-hooks/use-media-query

安装全部钩

npm install @custom-react-hooks/all

或者说

yarn add @custom-react-hooks/all

导入虎克

这个 useMediaQuery 钩必须使用下列命名的导入方式导入:

已命名的导入 :

import { useMediaQuery } from '@custom-react-hooks/use-media-query';

这种方法确保了钩子无缝地融入到您的项目中,在您如何使用我们的包时保持一致性和可预测性.

使用量

导入和使用 useMediaQuery 在您的反应组件中钩入 :

import { useMediaQuery } from '@custom-react-hooks/all';

const MediaQueryComponent = () => {
  const isWide = useMediaQuery('(min-width: 600px)');

  return (
    <div>
      {isWide ? 'Wide viewport detected' : 'Narrow viewport detected'}
      <br />
      <span>
        <i>Resize to see the effect</i>
      </span>
    </div>
  );
};

export default MediaQueryComponent;

API 参考

参数

• query: 代表要评价的媒体查询的字符串.

使用大小写

• 响应设计:根据取景口大小动态地调整布局或功能.
• 暗模式切换:根据用户的系统偏好在光和暗主题之间切换.
• 适应性渲染:基于媒体查询匹配的不同组件或内容渲染.
• 性能优化: 有条件地根据媒体查询(例如用于移动的图像)加载资源.

捐款

为加强《公约》 useMediaQuery 钩子是欢迎。 请随意向存储处提交问题或调取请求.