https://github.com/react-container-query/react-container-query

  1. npm install react-container-query

image.png

  1. import { ContainerQuery, useContainerQuery } from 'react-container-query';
  3. // 媒体查询
  4. const query = {
  5.   'screen-xs': {
  6.     maxWidth: 575,
  7.   },
  8.   'screen-sm': {
  9.     minWidth: 576,
  10.     maxWidth: 767,
  11.   },
  12.   'screen-md': {
  13.     minWidth: 768,
  14.     maxWidth: 991,
  15.   },
  16.   'screen-lg': {
  17.     minWidth: 992,
  18.     maxWidth: 1199,
  19.   },
  20.   'screen-xl': {
  21.     minWidth: 1200,
  22.   },
  23. };
  25. function App() {
  26.   return (
  27.     <ContainerQuery query={query}>
  28.       {params => <div className={classNames(params)}>{layout}</div>}
  29.     </ContainerQuery>
  30.   );
  31. }

useContainerQuery

  1. import React from 'react';
  2. import { useContainerQuery } from 'react-container-query';
  4. const query = {
  5.   'width-between-400-and-599': {
  6.     minWidth: 400,
  7.     maxWidth: 599,
  8.   },
  9.   'width-larger-than-600': {
  10.     minWidth: 600,
  11.   },
  12. };
  14. const MyCustomWrapper = React.forwardRef((props, ref) => {
  15.   // MyCustomWrapper really renders a div which wraps the children. 
  16.   // Setting the ref on it allows container query to measure its size.
  17.   return <div ref={ref}>{props.children}</div>
  18. });
  20. const MyComponent = () => {
  21.   const [params, containerRef] = useContainerQuery(query);
  22.   return <MyCustomWrapper ref={containerRef} className={classnames(params)}>the box</div>;
  23. };