useMobile
The useMobile hook is a convenient utility for creating responsive layouts in your application. It helps determine if the current viewport width is considered 'mobile' based on standard Material-UI breakpoints.
This hook simplifies responsive logic by abstracting away the underlying useTheme and useMediaQuery calls from Material-UI.
Basic Usage#
Import the hook and use it within your component to get a boolean value indicating if the screen is mobile-sized, along with the corresponding pixel width for that breakpoint.
import { useMobile } from '@blocklet/payment-react';
import Typography from '@mui/material/Typography';
function ResponsiveComponent() {
const { isMobile } = useMobile();
return (
<Typography variant="h5">
{isMobile ? 'This is the mobile view.' : 'This is the desktop view.'}
</Typography>
);
}In this example, the component will render different text depending on whether the screen width is below the default 'md' (medium) breakpoint.
Parameters#
The useMobile hook accepts an optional parameter to customize the breakpoint used for mobile detection.
Name | Type | Default | Description |
|---|---|---|---|
|
|
| The Material-UI breakpoint to use as the threshold. The hook will return |
Return Value#
The hook returns an object with two properties:
Key | Type | Description |
|---|---|---|
|
|
|
|
| A string representing the pixel width of the |
Example with Custom Breakpoint#
You can specify a different breakpoint if your application's design requires a different threshold for mobile view.
import { useMobile } from '@blocklet/payment-react';
import Box from '@mui/material/Box';
function CustomBreakpointComponent() {
// Consider 'sm' and below as mobile
const { isMobile, mobileSize } = useMobile('sm');
return (
<Box sx={{ p: 2, border: '1px solid grey' }}>
<p>The mobile breakpoint is set to {mobileSize}.</p>
{isMobile ? (
<p>This layout is optimized for smaller screens.</p>
) : (
<p>This layout is for tablets and desktops.</p>
)}
</Box>
);
}This component adjusts its responsive behavior based on the 'sm' (small) breakpoint, providing more granular control over your UI.