How to use use-media-antd-query - 2 common examples

onSubmit,
  formRef,
  dateFormatter = 'string',
  search: propsSearch,
}: TableFormItem) => {
  const intl = useIntl();
  const searchConfig = getDefaultSearch(propsSearch, intl);
  const { span, searchText, resetText, collapseRender } = searchConfig;

  const counter = Container.useContainer();
  const [collapse, setCollapse] = useState(true);
  const [proColumnsMap, setProColumnsMap] = useState<{
    [key: string]: ProColumns;
  }>({});

  const windowSize = useMediaQuery();
  const [colSize, setColSize] = useState(getSpanConfig(span, windowSize));
  const [formHeight, setFormHeight] = useState(88);
  const rowNumber = 24 / colSize || 3;

  useEffect(() => {
    if (!formRef) {
      return;
    }
    if (typeof formRef === 'function') {
      formRef(form);
    }
    if (formRef && typeof formRef !== 'function') {
      // eslint-disable-next-line no-param-reassign
      formRef.current = form;
    }
  }, []);

id,
        defaultMessage,
        ...rest,
      });
    }
    const locales = getLocales();
    if (locales[id]) {
      return locales[id];
    }
    if (defaultMessage) {
      return defaultMessage as string;
    }
    return id;
  };

  const colSize = useAntdMediaQuery();
  const { routes = [] } = route;
  const [menuInfoData, setMenuInfoData] = useMergeValue<{
    breadcrumb?: {
      [key: string]: MenuDataItem;
    };
    breadcrumbMap?: Map;
    menuData?: MenuDataItem[];
  }>(() => getMenuData(routes, menu, formatMessage, menuDataRender));

  let renderMenuInfoData: {
    breadcrumb?: {
      [key: string]: MenuDataItem;
    };
    breadcrumbMap?: Map;
    menuData?: MenuDataItem[];
  } = {};