@blocklet/payment-react/docs/hooks-use-mobile.zh-TW.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"`）。 |