Obtenez la fenêtre d'affichage/hauteur de la fenêtre en ReactJS

À L'Aide De Crochets (Réagir 16.8.0+)

Créer un useWindowDimensions crochet.

import { useState, useEffect } from 'react';

function getWindowDimensions() {
  const { innerWidth: width, innerHeight: height } = window;
  return {
    width,
    height
  };
}

export default function useWindowDimensions() {
  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());

  useEffect(() => {
    function handleResize() {
      setWindowDimensions(getWindowDimensions());
    }

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return windowDimensions;
}

Et après cela, vous serez capable de l'utiliser dans vos composants comme ce

const Component = () => {
  const { height, width } = useWindowDimensions();

  return (
    <div>
      width: {width} ~ height: {height}
    </div>
  );
}

Exemple de travail

Réponse originale à cette question

C'est la même chose à Réagir, vous pouvez utiliser window.innerHeight pour obtenir la fenêtre d'affichage en cours de la hauteur.

Comme vous pouvez le voir ici

@speckledcarp 's réponse est grande, mais il peut être fastidieux si vous avez besoin de cette logique en plusieurs composants. Vous pouvez restructurer comme une HOC (plus la composante de l'ordre) pour faire de cette logique plus facile de les réutiliser.

withWindowDimensions.jsx

import React, { Component } from "react";

export default function withWindowDimensions(WrappedComponent) {
    return class extends Component {
        state = { width: 0, height: 0 };

        componentDidMount() {
            this.updateWindowDimensions();
            window.addEventListener("resize", this.updateWindowDimensions);
        }

        componentWillUnmount() {
            window.removeEventListener("resize", this.updateWindowDimensions);
        }

        updateWindowDimensions = () => {
            this.setState({ width: window.innerWidth, height: window.innerHeight });
        };

        render() {
            return (
                <WrappedComponent
                    {...this.props}
                    windowWidth={this.state.width}
                    windowHeight={this.state.height}
                    isMobileSized={this.state.width < 700}
                />
            );
        }
    };
}

Puis dans votre composante principale:

import withWindowDimensions from './withWindowDimensions.jsx';

class MyComponent extends Component {
  render(){
    if(this.props.isMobileSized) return <p>It's short</p>;
    else return <p>It's not short</p>;
}

export default withWindowDimensions(MyComponent);

Vous pouvez également "pile" HOCs si vous avez une autre vous avez besoin d'utiliser, par exemple, withRouter(withWindowDimensions(MyComponent))

Edit: j'allais Réagir avec un crochet de nos jours (l'exemple ci-dessus ici), comme ils résoudre certains des avancée des problèmes avec HOCs et les classes

Réponses par @speckledcarp et @Jamesl sont à la fois brillant. Dans mon cas, cependant, j'avais besoin d'un composant dont la hauteur pouvait s'étendre sur toute la hauteur de la fenêtre, conditionnelle au moment du rendu.... mais l'appel d'une HOC dans render() re-rend toute la sous-arborescence. BAAAD.

Plus, je n'étais pas intéressé à obtenir les valeurs que les accessoires, mais voulait simplement un parent div qui occupent toute la hauteur de l'écran (ou la largeur, ou les deux).

J'ai donc écrit un composant Parent qui offre une hauteur et/ou largeur) div. Boom.

Un cas d'utilisation:

class MyPage extends React.Component {
  render() {
    const { data, ...rest } = this.props

    return data ? (
      //My app uses templates which misbehave badly if you manually mess around with the container height, so leave the height alone here.
      <div>Yay! render a page with some data. </div>
    ) : (
      <FullArea vertical>
        //You're now in a full height div, so containers will vertically justify properly
        <GridContainer justify="center" alignItems="center" style={{ height: "inherit" }}>
          <GridItem xs={12} sm={6}>
            Page loading!
          </GridItem>
        </GridContainer>
      </FullArea>
    )

Voici le composant:

import React, { Component } from 'react'
import PropTypes from 'prop-types'
class FullArea extends Component {
constructor(props) {
super(props)
this.state = {
width: 0,
height: 0,
}
this.getStyles = this.getStyles.bind(this)
this.updateWindowDimensions = this.updateWindowDimensions.bind(this)
}
componentDidMount() {
this.updateWindowDimensions()
window.addEventListener('resize', this.updateWindowDimensions)
}
componentWillUnmount() {
window.removeEventListener('resize', this.updateWindowDimensions)
}
getStyles(vertical, horizontal) {
const styles = {}
if (vertical) {
styles.height = `${this.state.height}px`
}
if (horizontal) {
styles.width = `${this.state.width}px`
}
return styles
}
updateWindowDimensions() {
this.setState({ width: window.innerWidth, height: window.innerHeight })
}
render() {
const { vertical, horizontal } = this.props
return (
<div style={this.getStyles(vertical, horizontal)} >
{this.props.children}
</div>
)
}
}
FullArea.defaultProps = {
horizontal: false,
vertical: false,
}
FullArea.propTypes = {
horizontal: PropTypes.bool,
vertical: PropTypes.bool,
}
export default FullArea

J'ai juste édité QoP's réponse actuelle à l'appui de SSR et l'utiliser avec Next.js (réaction de la section 16.8.0+):

/hooks/useWindowDimensions.js:

import { useState, useEffect } from 'react';
export default function useWindowDimensions() {
const hasWindow = typeof window !== 'undefined';
function getWindowDimensions() {
const width = hasWindow ? window.innerWidth : null;
const height = hasWindow ? window.innerHeight : null;
return {
width,
height,
};
}
const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
useEffect(() => {
if (hasWindow) {
function handleResize() {
setWindowDimensions(getWindowDimensions());
}
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}
}, [hasWindow]);
return windowDimensions;
}

/yourComponent.js:

import useWindowDimensions from './hooks/useWindowDimensions';
const Component = () => {
const { height, width } = useWindowDimensions();
/* you can also use default values or alias to use only one prop: */
//const { height: windowHeight = 480 } useWindowDimensions();
return (
<div>
width: {width} ~ height: {height}
</div>
);
}