ReactJS: hoe te bepalen of de applicatie wordt bekeken in een mobiele of desktopbrowser

Is er in ReactJS een manier om te bepalen of de website op mobiel of desktop wordt bekeken? Omdat ik, afhankelijk van welk apparaat ik verschillende dingen wil renderen.

Bedankt

Antwoord 1, autoriteit 100%

Eenvoudige oplossing met behulp van reactiehaken

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;

Antwoord 2, autoriteit 65%

U kunt het React Device Detect Package

gebruiken

Dit pakket gebruikt de user-agentvan de browser in plaats van de schermgrootte.

Dit kan handig zijn als u verschillende dingen wilt weergeven op desktop versus mobiel of bepaalde links op basis van het apparaat

Installatie

Om te installeren, kunt u npm of garen gebruiken:

# For NPM:
npm install react-device-detect --save
# For Yarn
yarn add react-device-detect

Gebruik

Voorbeeld:

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>
        </>
    );
};

als u geen weergave nodig heeft, kunt u isMobilegebruiken voor voorwaardelijke weergave

import {isMobile} from 'react-device-detect';
const MyComponent = () => {
    if(isMobile) {
        return (
            <div> This content is available only on mobile</div>
        )
    }
    return (
        <div> content... </div>
    );
};

Overgenomen van React Device Detect READMEmet een kleine aanpassing

Antwoord 3, autoriteit 26%

Wat u zoekt, wordt react-responsivegenoemd. Je kunt het hier

vinden

Hier is de how to usekorte handleiding uit hun 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>
    );
  }
});

Antwoord 4, autoriteit 24%

Ik heb het antwoord van Volobot verder verbeterd. Ik had een haak gemaakt zoals hieronder en het werkt als een tierelier 🙂

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

Antwoord 5, autoriteit 9%

Waarom zou je het ingewikkelder maken als je één regel vanille-javascript-code kunt gebruiken?

Gebruik window.screenobject om de breedte van het huidige scherm te krijgen. window.screen.widthretourneert bijvoorbeeld de waarde van de huidige breedte van de client in pixels.

Gebruik het binnen if (window.screen.width >= 1280) { /* conditional statements */ }

Ik hoop dat het helpt. Dank je 🙂

Antwoord 6, autoriteit 4%

Ik heb deze methode gebruikt voor React en het werkt geweldig in 2020. Bedankt @Anubahav Gupta

npm install react-responsive --save

Maak vervolgens component:

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;

Het werkt zoals het is op elke geladen pagina, maar kan ook in een ander bestand worden geïmporteerd met:

import MyMediaQuery from '.newFileName';

Vervolgens overal gebruikt als:

<MyMediaQuery />

Antwoord 7

Maak een aangepaste hook en luister ernaar. Resize, load, oriental change en reload zal de component waar je deze hook hebt gebruikt opnieuw weergeven.

 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;

Antwoord 8

Dit is niet specifiek voor Reageren, maar hier is mijn js-functie:

export const isMobile = () => window.matchMedia && window.matchMedia("(max-width: 480px)").matches

Antwoord 9

const getNumberDesignRequest = screenWidth => {
  let numberDesignRequest = 20
  if (screenWidth >= 1280 && screenWidth < 1525) {
    numberDesignRequest = 21
  }
  return numberDesignRequest
}
const ScreenWidth = () => {
  const [screenWidth, setScreenWidth] = useState(window.innerWidth)
  useLayoutEffect(() => {
    const handleResize = () => {
      const { innerWidth } = window
      setScreenWidth(innerWidth)
    }
    window.addEventListener('resize', debounce(handleResize, 1000))
    return () => window.removeEventListener('resize', handleResize)
  }, [])
  return screenWidth
}
const FuzzySearch = () => {
  const screenWidth = ScreenWidth()
const numberDesignRequest = getNumberDesignRequest(screenWidth)

Antwoord 10

React doet dit niet, React is alleen de weergave in MVC. Determinatielogica (controleren wat MOET worden bekeken) is de rol van de Controller. React implementeert geen controller, maar vindt dat dit door de rest van de applicatie moet worden gedaan, dus je moet wat andere code toevoegen die de context van de React-component controleert of zelfs verschillende componenten voor verschillende apparaten gebruikt.