React的响应式魔术：利用Usecheckeckmobilescreen钩ð¥¥-DEV365 开发者社区

嘿，开发人员！您是否曾经考虑过如何在小型移动屏幕和大型台式计算机上使您的React应用程序看起来不错？您知道，我们在CSS中有这些称为媒体查询的东西可以帮助我们。但是有时候，处理媒体查询可能会很困难并使事情变得混乱。好吧，猜怎么着？您不再需要担心！
让我向您介绍一个新朋友：'usecheckmobilescreen'自定义挂钩。这是为了使您更容易！

遇到行动中的钩子

现在，让我们看看这个神奇的钩子在您的代码中如何工作：

import { useEffect, useState } from "react";

const useCheckMobileScreen = () => {
  const [width, setWidth] = useState(window.innerWidth);

  const handleWindowSizeChange = () => {
    setWidth(window.innerWidth);
  };

  useEffect(() => {
    window.addEventListener("resize", handleWindowSizeChange);
    return () => {
      window.removeEventListener("resize", handleWindowSizeChange);
    };
  }, []);

  return {
    isMobile: width <= 768,
  };
};

export default useCheckMobileScreen;

import useCheckMobileScreen from "hooks";
const App = () => {
  const { isMobile } = useCheckMobileScreen();
  return (
    <>
      {isMobile ? (
        <div>Render something for Mobile Only</div>
      ) : (
        <div>Render Something on Desktop Only</div>
      )}

      {/* Also In Case if you have different styles for mobile & desktop */}
      <p
        className={`${
          isMobile ? "mobile-screen-paragraph" : "desktop-screen-paragraph"
        }`}
      >
        Text Goes here
      </p>
    </>
  );
};
export default App;

包装

因此，您拥有它，使您的React应用程序成为每个屏幕上的超级巨星的秘诀：Usecheckeckmobilescreen钩子！这是一个简单的小帮手，在创建一个用户友好且适应性的应用程序方面具有很大的不同。因此，请尝试一下，尝试一下您的应用程序在屏幕大小的屏幕上闪耀。愉快的编码，并继续传播响应迅速的魔术！ ðð±ð»