✨ feat: 新增 useResponse hooks

src/functions/createStyles/index.ts

@@ -16,7 +16,7 @@ import type {
 } from '@/types';
 import { isReactCssResult } from '@/utils';
 
-import { convertResponsiveStyleToString, useResponsiveMap } from './response';
+import { convertResponsiveStyleToString, useMediaQueryMap } from './response';
 
 import { reactCss } from '../react';
 
@@ -63,7 +63,7 @@ export const createStyles =
   ) =>
   (props?: Props): ReturnStyles<Input> => {
     const theme = useTheme();
-    const responsiveMap = useResponsiveMap();
+    const responsiveMap = useMediaQueryMap();
     const { css, cx } = useEmotion();
 
     const styles = useMemo(() => {

src/functions/createStyles/response.ts

@@ -2,32 +2,23 @@ import { reactCss } from '@/functions/react';
 import { useAntdToken } from '@/hooks';
 import type { Breakpoint, BreakpointMapParams, CSSObject, ResponsiveMap } from '@/types';
 import { isReactCssResult } from '@/utils';
+import { convertBreakpointToResponsive } from '@/utils/responsive';
 import type { SerializedStyles } from '@emotion/react';
 import { useMemo } from 'react';
 
-export const useResponsiveMap = (): ResponsiveMap => {
+export const useMediaQueryMap = (): ResponsiveMap => {
   const token = useAntdToken();
 
   const breakpoints: Record<Breakpoint, string> = {
     xs: `@media (max-width: ${token.screenXSMax}px)`,
     sm: `@media (max-width: ${token.screenSMMax}px)`,
     md: `@media (max-width: ${token.screenMDMax}px)`,
-
     lg: `@media (max-width: ${token.screenLGMax}px)`,
     xl: `@media (max-width: ${token.screenXLMax}px)`,
     xxl: `@media (min-width: ${token.screenXXLMin}px)`,
   };
 
-  return useMemo(
-    () => ({
-      ...breakpoints,
-      mobile: breakpoints.xs,
-      tablet: breakpoints.md,
-      laptop: breakpoints.lg,
-      desktop: breakpoints.xxl,
-    }),
-    [token],
-  );
+  return useMemo(() => convertBreakpointToResponsive(breakpoints), [token]);
 };
 
 /**

src/hooks/index.ts

@@ -2,5 +2,6 @@ export * from './useAntdStylish';
 export * from './useAntdTheme';
 export * from './useAntdToken';
 export * from './useEmotion';
+export * from './useResponsive';
 export * from './useTheme';
 export * from './useThemeMode';

src/hooks/useResponsive.ts

@@ -0,0 +1,10 @@
+import { ResponsiveKey } from '@/types';
+import { convertBreakpointToResponsive } from '@/utils/responsive';
+import { Grid } from 'antd';
+import { useMemo } from 'react';
+
+export const useResponsive = (): Partial<Record<ResponsiveKey, boolean>> => {
+  const breakpoints = Grid.useBreakpoint();
+
+  return useMemo(() => convertBreakpointToResponsive(breakpoints), [breakpoints]);
+};

src/utils/responsive.ts

@@ -0,0 +1,11 @@
+import { Breakpoint } from '@/types';
+
+export const convertBreakpointToResponsive = <T extends Partial<Record<Breakpoint, any>>>(
+  breakpoints: T,
+): any => ({
+  ...breakpoints,
+  mobile: breakpoints.xs,
+  tablet: breakpoints.md,
+  laptop: breakpoints.lg,
+  desktop: breakpoints.xxl,
+});