@blocklet/payment-react/docs/hooks-use-mobile.zh.md

Reusable react components for payment kit v2

# useMobile

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

## 工作原理

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

## 基本用法

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

```tsx ResponsiveComponent.tsx icon=logos:react
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'`。 |

### 自定义断点

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

```tsx CustomBreakpoint.tsx icon=logos:react
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”`）。 |