ReactJS: So bestimmen Sie, ob die Anwendung im mobilen oder Desktop-Browser angezeigt wird

Gibt es in ReactJS eine Möglichkeit festzustellen, ob die Website auf dem Handy oder dem Desktop angezeigt wird? Denn je nach Gerät möchte ich unterschiedliche Sachen rendern.

Vielen Dank

Einfache Lösung mit Reaktionshaken

const [width, setWidth] = useState<number>(window.innerWidth);

function handleWindowSizeChange() {
    setWidth(window.innerWidth);
}
useEffect(() => {
    window.addEventListener('resize', handleWindowSizeChange);
    return () => {
        window.removeEventListener('resize', handleWindowSizeChange);
    }
}, []);

const isMobile = width <= 768;

Sie können verwenden Reagieren Sie auf das Geräteerkennungspaket

Dieses Paket verwendet die user-agent des Browsers und nicht der Bildschirmgröße.

Dies kann hilfreich sein, wenn Sie unterschiedliche Dinge anzeigen möchten, ob auf dem Desktop oder auf dem Handy, oder bestimmte Links basierend auf dem Gerät

Installation

Zur Installation können Sie npm oder Garn verwenden:

# For NPM:
npm install react-device-detect --save

# For Yarn
yarn add react-device-detect

Verwendungszweck

Beispiel:

import {BrowserView, MobileView} from 'react-device-detect';

const MyComponent = () => {
    return (
        <>
            <BrowserView>
                <h1>This is rendered only in browser</h1>
            </BrowserView>
            <MobileView>
                <h1>This is rendered only on mobile</h1>
            </MobileView>
        </>
    );
};

Wenn Sie keine Ansicht benötigen, können Sie verwenden isMobile für bedingtes Rendern

import {isMobile} from 'react-device-detect';

const MyComponent = () => {
    if(isMobile) {
        return (
            <div> This content is available only on mobile</div>
        )
    }
    return (
        <div> content... </div>
    );
};

Genommen von React Device Detect README mit einer kleinen Modifikation

Ich habe Volobots Antwort weiter verbessert. Ich hatte einen Haken wie unten erstellt und er funktioniert wie ein Zauber 🙂

import React, {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 (width <= 768);
}

export default useCheckMobileScreen

Was Sie suchen, heißt react-responsive. Du kannst es finden hier

Hier ist how to use Kurzanleitung aus ihrem Repo:

var MediaQuery = require('react-responsive');

var A = React.createClass({
  render: function(){
    return (
      <div>
        <div>Device Test!</div>

        <MediaQuery minDeviceWidth={1224}>
          <div>You are a desktop or laptop</div>
        </MediaQuery>
        <MediaQuery maxDeviceWidth={1224}>
          <div>You are a tablet or mobile phone</div>
        </MediaQuery>

        <MediaQuery orientation='portrait'>
          <div>You are portrait</div>
        </MediaQuery>
        <MediaQuery orientation='landscape'>
          <div>You are landscape</div>
        </MediaQuery>

        <MediaQuery minResolution='2dppx'>
          <div>You are retina</div>
        </MediaQuery>
      </div>
    );
  }
});

Warum die Dinge komplizieren, wenn Sie eine Zeile Vanilla-Javascript-Code verwenden können?

Verwenden window.screen Objekt, um die Breite des aktuellen Bildschirms zu erhalten. Zum Beispiel window.screen.width gibt den Wert der aktuellen Breite des Clients in Pixel zurück.

Verwenden Sie es drinnen if (window.screen.width >= 1280) { /* conditional statements */ }

Ich hoffe, dass es hilft. Vielen Dank 🙂

Erstellen Sie einen benutzerdefinierten Hook und hören Sie auf Größenänderung, Laden, Ausrichtungsänderung und Neuladen wird die Komponente neu rendern, in der Sie diesen Hook verwendet haben.

  import { useState, useEffect } from 'react';

  const useDeviceDetect = () => {
    const checkForDevice = () => {
      let windowWidth = window.innerWidth;
      if (windowWidth < 767.98) {
        return true;
      } else {
        return false;
      }
    };

    const [isMobile, setIsMobile] = useState(checkForDevice());

    useEffect(() => {
      const handlePageResized = () => {
        setIsMobile(checkForDevice);
      };

      window.addEventListener('resize', handlePageResized);
      window.addEventListener('orientationchange', handlePageResized);
      window.addEventListener('load', handlePageResized);
      window.addEventListener('reload', handlePageResized);

      return () => {
        window.removeEventListener('resize', handlePageResized);
        window.removeEventListener('orientationchange', handlePageResized);
        window.removeEventListener('load', handlePageResized);
        window.removeEventListener('reload', handlePageResized);
      };
    }, []);

    return {
      isMobile,
    };
  };

  export default useDeviceDetect;

Ich habe diese Methode für React verwendet und sie funktioniert 2020 hervorragend. Danke @Anubahav Gupta

npm install react-responsive --save

Dann Komponente erstellen:

import React, { Fragment, Component } from 'react';
import MediaQuery from 'react-responsive';

class MyMediaQuery extends Component {
    render() {
        return (
            <Fragment>
                <div>Device Test!</div>

                <MediaQuery minDeviceWidth={1224}>
                    <div>You are a desktop or laptop</div>
                </MediaQuery>
                <MediaQuery maxDeviceWidth={1224}>
                    <div>You are a tablet or mobile phone</div>
                </MediaQuery>

                <MediaQuery orientation='portrait'>
                    <div>You are portrait</div>
                </MediaQuery>
                <MediaQuery orientation='landscape'>
                    <div>You are landscape</div>
                </MediaQuery>

                <MediaQuery minResolution='2dppx'>
                    <div>You are retina</div>
                </MediaQuery>
            </Fragment>
        );
    }
}

export default MyMediaQuery;

Es funktioniert unverändert auf jeder geladenen Seite, kann aber auch in eine andere Datei importiert werden mit:

import MyMediaQuery from '.newFileName';

Dann überall verwendet als:

<MyMediaQuery />