diff --git a/src/functions/createStyles/index.ts b/src/functions/createStyles/index.ts
index b3c199a6..6c43629e 100644
--- a/src/functions/createStyles/index.ts
+++ b/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 => {
const theme = useTheme();
- const responsiveMap = useResponsiveMap();
+ const responsiveMap = useMediaQueryMap();
const { css, cx } = useEmotion();
const styles = useMemo(() => {
diff --git a/src/functions/createStyles/response.ts b/src/functions/createStyles/response.ts
index 7d8019f8..3f66bbc8 100644
--- a/src/functions/createStyles/response.ts
+++ b/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 = {
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]);
};
/**
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 1ac5fd39..42bbe77b 100644
--- a/src/hooks/index.ts
+++ b/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';
diff --git a/src/hooks/useResponsive.ts b/src/hooks/useResponsive.ts
new file mode 100644
index 00000000..2308d991
--- /dev/null
+++ b/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> => {
+ const breakpoints = Grid.useBreakpoint();
+
+ return useMemo(() => convertBreakpointToResponsive(breakpoints), [breakpoints]);
+};
diff --git a/src/utils/responsive.ts b/src/utils/responsive.ts
new file mode 100644
index 00000000..3d5ca56b
--- /dev/null
+++ b/src/utils/responsive.ts
@@ -0,0 +1,11 @@
+import { Breakpoint } from '@/types';
+
+export const convertBreakpointToResponsive = >>(
+ breakpoints: T,
+): any => ({
+ ...breakpoints,
+ mobile: breakpoints.xs,
+ tablet: breakpoints.md,
+ laptop: breakpoints.lg,
+ desktop: breakpoints.xxl,
+});