Handling multi devices - CPNV-ES/notice GitHub Wiki

Handling multi-devices

With React Hooks

One way to handle multiple devices is using React Hooks.

const MyComponent = () => {
  // State declared with hook
  const [width, setWidth] = React.useState(window.innerWidth);
  const mobileMaxWidth = 620;

  React.useEffect(() => {
    // Updates the state's value on window resize
    window.addEventListener("resize", () => setWidth(window.innerWidth));
  }, []);

  return width < mobileMaxWidth ? <MobileComponent /> : <DesktopComponent />;
}

Using a Hook is necessary, as we want the component to dynamically change when the device's resolution changes. If we didn't use a hook in this example, the "width" variable would only be set the first time the component is rendered.

To make the code reusable and to avoid rewriting the same logic multiple times, we can write a custom hook:

const useViewport = () => {
  const mobileMaxWidth = 620;
  const tabletteMaxWidth = 1024;
  const [isLandscape, setIsLandscape] = React.useState(window.innerWidth > window.innerHeight);
  const [width, setWidth] = React.useState(window.innerWidth);
  const [isMobile, setIsMobile] = React.useState(window.innerWidth < mobileMaxWidth);
  const [isTablette, setIsTablette] = React.useState(window.innerWidth < tabletteMaxWidth && !isMobile);
  const [isDesktop, setIsDesktop] = React.useState(!isMobile && !isTablette);

  React.useEffect(() => {
    const handleWindowResize = () => { 
      setIsLandscape(window.innerWidth > window.innerHeight);
      setWidth(window.innerWidth);
      setIsMobile(window.innerWidth < mobileMaxWidth);
      setIsTablette(window.innerWidth < tabletteMaxWidth && !isMobile);
      setIsDesktop(!isMobile && !isTablette);
    }
    window.addEventListener("resize", handleWindowResize);
    return () => window.removeEventListener("resize", handleWindowResize);
  }, []);

  // Return our props so we can use them in our components
  return { width, isMobile, isTablette, isDesktop, isLandscape };
}

Then we can use the props provided by our custom Hook:

const MyComponent = () => {
  const { isMobile } = useViewport();

  return isMobile ? <MobileComponent /> : <DesktopComponent />;
}

With react-device-detect

react-device-detect provides multiple ways to handle multiple devices.

The first one is similar to using Hooks: it provides props to detect the current device type, which then allows to render specific elements depending on the device.

renderContent = () => {
    if (isMobileOnly) {
        return <div> ... mobile content ...</div>
    }
    else if(isTablet) {
        return <div> ... tablet content ...</div>
    } 
    else if(isDesktop) {
        return <div> ... wide screen content ... </div>
    }
}

Alternatively, it also exposes multiple elements which only render their content for a specific device type.

<DesktopView>
    <h1> This is rendered only in desktop </h1>
</DesktopView>
<MobileOnlyView>
    <h1> This is rendered only on mobile</h1>
</MobileOnlyView>
<TabletView>
    <h1> This is rendered only on tablet </h1>
</TabletView>
<MobileView>
    <h1> This is rendered on mobile AND tablet </h1>
</MobileView>

The package also allows to detect the device orientation with the isPortrait and isLandscape props.

⚠️ **GitHub.com Fallback** ⚠️