useMobile | ArcBlock

useMobile hook 是一个方便的实用程序，用于检测应用程序是否在移动尺寸的设备上查看。它通过利用 Material-UI 的断点系统，帮助您直接在 React 逻辑中创建响应式布局和组件。

工作原理

在内部，useMobile 使用了 Material-UI 的 useTheme 和 useMediaQuery hook。它会根据主题中定义的断点检查当前屏幕宽度，以确定视口是否符合“移动设备”的标准。

基本用法

以下是一个如何使用 useMobile hook 来条件性渲染内容的简单示例。

ResponsiveComponent.tsx

import { useMobile } from '@blocklet/payment-react';
import { Typography, Box } from '@mui/material';

function ResponsiveComponent() {
  const { isMobile, mobileSize } = useMobile();

  return (
    <Box p={2}>
      <Typography variant="h5">
        响应式内容
      </Typography>
      {
        isMobile ? (
          <Typography>
            这是移动视图。屏幕尺寸为 {mobileSize} 或更小。
          </Typography>
        ) : (
          <Typography>
            这是桌面视图。屏幕宽度大于 {mobileSize}。
          </Typography>
        )
      }
    </Box>
  );
}

export default ResponsiveComponent;

参数

useMobile hook 接受一个可选参数来自定义断点。

Name	Type	Description
`mobilePoint`	`'md' \| 'sm' \| 'lg' \| 'xl' \| 'xs'`	作为移动设备阈值的断点。如果屏幕宽度小于或等于此断点，`isMobile` 标志将为 true。默认为 `'md'`。

自定义断点

您可以通过传递不同的值来轻松更改断点。

CustomBreakpoint.tsx

import { useMobile } from '@blocklet/payment-react';
import { Typography } from '@mui/material';

function CustomBreakpointComponent() {
  // 将 'sm' (小) 尺寸及以下的屏幕视为移动设备
  const { isMobile } = useMobile('sm');

  return (
    <div>
      {isMobile ? (
        <Typography>为小屏幕显示</Typography>
      ) : (
        <Typography>为中等及更大屏幕显示</Typography>
      )}
    </div>
  );
}

export default CustomBreakpointComponent;

返回值

该 hook 返回一个包含以下属性的对象：

Key	Type	Description
`isMobile`	`boolean`	如果当前视口宽度小于或等于指定的 `mobilePoint` 断点，则为 `true`，否则为 `false`。
`mobileSize`	`string`	一个表示 `mobilePoint` 断点像素宽度的字符串（例如 `“900px”`）。