Documents
use-responsive.en-US
use-responsive.en-US
Type
External
Status
Published
Created
Jun 12, 2026
Updated
Jun 12, 2026
Source
View

Introduction#

Get the result of responsive media queries. It is encapsulated based on antd's Grid.useBreakpoint .

Usage#

import { useResponsive } from 'antd-style';

function Theme() {
  const { mobile } = useResponsive();

  // Use JavaScript to distinguish between mobile and desktop
  return mobile ? <div>mobile</div> : <div>desktop</div>;
}

Example#

Custom Breakpoints#

Customize responsive breakpoints by passing in antd's breakpoint configuration.