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"`）。