feat: useBreakpoint hook

components/__tests__/__snapshots__/index.test.js.snap

@@ -27,6 +27,7 @@ Array [
   "Drawer",
   "Empty",
   "Form",
+  "Grid",
   "Input",
   "InputNumber",
   "Layout",

components/grid/__tests__/__snapshots__/demo.test.js.snap

@@ -1226,3 +1226,15 @@ exports[`renders ./components/grid/demo/sort.md correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`renders ./components/grid/demo/useBreakpoint.md correctly 1`] = `
+<div
+  class="ant-row"
+>
+  <div
+    class="ant-col"
+  >
+    Current break point: 
+  </div>
+</div>
+`;

components/grid/demo/useBreakpoint.md

@@ -0,0 +1,36 @@
+---
+order: 10
+title: useBreakpoint Hook
+---
+
+## zh-CN
+
+使用 `useBreakpoint` Hook 个性化布局。
+
+## en-US
+
+Use `useBreakpoint` Hook povide personalized layout.
+
+```jsx
+import { Row, Col, Grid } from 'antd';
+
+const { useBreakpoint } = Grid;
+
+function UseBreakpointDemo() {
+  const screens = useBreakpoint();
+
+  return (
+    <Row>
+      <Col>
+        Current break point:&nbsp;
+        {Object.entries(screens)
+          .filter(screen => !!screen[1])
+          .map(screen => screen[0])
+          .join(' ')}
+      </Col>
+    </Row>
+  );
+}
+
+ReactDOM.render(<UseBreakpointDemo />, mountNode);
+```

components/grid/hooks/useBreakpoint.tsx

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+import ResponsiveObserve, { ScreenMap } from '../../_util/responsiveObserve';
+
+function useBreakpoint(): ScreenMap {
+  const [screens, setScreens] = useState<ScreenMap>({});
+
+  useEffect(() => {
+    const token = ResponsiveObserve.subscribe(supportScreens => {
+      setScreens(supportScreens);
+    });
+
+    return () => ResponsiveObserve.unsubscribe(token);
+  }, []);
+
+  return screens;
+}
+
+export default useBreakpoint;

components/grid/index.tsx

@@ -1,7 +1,10 @@
 import Row from './row';
 import Col from './col';
+import useBreakpoint from './hooks/useBreakpoint';
 
 export { RowProps } from './row';
 export { ColProps, ColSize } from './col';
 
 export { Row, Col };
+
+export default { useBreakpoint };

components/index.tsx

@@ -66,6 +66,8 @@ export { default as Empty } from './empty';
 
 export { default as Form } from './form';
 
+export { default as Grid } from './grid';
+
 export { default as Input } from './input';
 
 export { default as InputNumber } from './input-number';

tests/__snapshots__/index.test.js.snap

@@ -27,6 +27,7 @@ Array [
   "Drawer",
   "Empty",
   "Form",
+  "Grid",
   "Input",
   "InputNumber",
   "Layout",