Obtenir la hauteur de la fenêtre / fenêtre dans ReactJS

Comment obtenir la hauteur de la fenêtre dans ReactJS? En JavaScript normal, j'utilise

window.innerHeight()

mais en utilisant ReactJS, je ne sais pas comment obtenir ces informations. Ma compréhension est que

ReactDOM.findDomNode()

ne fonctionne que pour les composants créés. Cependant ce n'est pas le cas pour l' élément documentou body, qui pourrait me donner la hauteur de la fenêtre.

Cette réponse est similaire à celle de Jabran Saeed, sauf qu'elle gère également le redimensionnement des fenêtres. Je l'ai eu d' ici .

constructor(props) {
  super(props);
  this.state = { width: 0, height: 0 };
  this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
}

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

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

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

Utiliser des crochets (React 16.8.0+)

Créez un useWindowDimensionscrochet.

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 pourrez l'utiliser dans vos composants comme celui-ci

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

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

Exemple de travail

Réponse originale

C'est la même chose dans React, vous pouvez utiliser window.innerHeightpour obtenir la hauteur de la fenêtre actuelle.

Comme vous pouvez le voir ici

class AppComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {height: props.height};
  }

  componentWillMount(){
    this.setState({height: window.innerHeight + 'px'});
  }

  render() {
    // render your component...
  }
}

Définir les accessoires

AppComponent.propTypes = {
 height:React.PropTypes.string
};

AppComponent.defaultProps = {
 height:'500px'
};

la hauteur de la fenêtre est désormais disponible en tant que {this.state.height} dans le modèle de rendu

Je viens de modifier la réponse actuelle de QoP pour prendre en charge SSR et l'utiliser avec Next.js (React 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>
  );
}

La réponse de @speckledcarp est excellente, mais peut être fastidieuse si vous avez besoin de cette logique dans plusieurs composants. Vous pouvez le refactoriser en tant que HOC (composant d'ordre supérieur) pour rendre cette logique plus facile à 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 composant principal:

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 «empiler» des HOC si vous en avez un autre à utiliser, par exemple withRouter(withWindowDimensions(MyComponent))

Edit: J'irais avec un hook React de nos jours ( exemple ci-dessus ici ), car ils résolvent certains des problèmes avancés avec les HOC et les classes

Je viens de passer un peu de temps sérieux à comprendre certaines choses avec React et à faire défiler les événements / positions - donc pour ceux qui cherchent encore, voici ce que j'ai trouvé:

La hauteur de la fenêtre peut être trouvée à l'aide de window.innerHeight ou à l'aide de document.documentElement.clientHeight. (Hauteur actuelle de la fenêtre)

La hauteur du document entier (corps) peut être trouvée à l'aide de window.document.body.offsetHeight.

Si vous essayez de trouver la hauteur du document et de savoir quand vous avez touché le bas, voici ce que j'ai trouvé:

if (window.pageYOffset >= this.myRefII.current.clientHeight && Math.round((document.documentElement.scrollTop + window.innerHeight)) < document.documentElement.scrollHeight - 72) {
        this.setState({
            trueOrNot: true
        });
      } else {
        this.setState({
            trueOrNot: false
        });
      }
    }

(Ma barre de navigation était 72px en position fixe, donc le -72 pour obtenir un meilleur déclencheur d'événement de défilement)

Enfin, voici un certain nombre de commandes de défilement vers console.log (), qui m'ont aidé à comprendre activement mes mathématiques.

console.log('window inner height: ', window.innerHeight);

console.log('document Element client hieght: ', document.documentElement.clientHeight);

console.log('document Element scroll hieght: ', document.documentElement.scrollHeight);

console.log('document Element offset height: ', document.documentElement.offsetHeight);

console.log('document element scrolltop: ', document.documentElement.scrollTop);

console.log('window page Y Offset: ', window.pageYOffset);

console.log('window document body offsetheight: ', window.document.body.offsetHeight);

Ouf! J'espère que cela aide quelqu'un!

// just use (useEffect). every change will be logged with current value
import React, { useEffect } from "react";

export function () {
  useEffect(() => {
    window.addEventListener('resize', () => {
      const myWidth  = window.innerWidth;
      console.log('my width :::', myWidth)
   })
  },[window])

  return (
    <>
      enter code here
   </>
  )
}

Les réponses de @speckledcarp et @Jamesl sont toutes deux brillantes. Dans mon cas, cependant, j'avais besoin d'un composant dont la hauteur pourrait étendre toute la hauteur de la fenêtre, conditionnelle au moment du rendu ... mais appeler un HOC à l'intérieur render()re-rend le sous-arbre entier. BAAAD.

De plus, je ne voulais pas obtenir les valeurs comme accessoires, mais je voulais simplement un parent divqui occuperait toute la hauteur de l'écran (ou la largeur, ou les deux).

J'ai donc écrit un composant Parent fournissant un div de pleine hauteur (et / ou largeur). 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

Vous pouvez également essayer ceci:

constructor(props) {
        super(props);
        this.state = {height: props.height, width:props.width};
      }

componentWillMount(){
          console.log("WINDOW : ",window);
          this.setState({height: window.innerHeight + 'px',width:window.innerWidth+'px'});
      }

render() {
        console.log("VIEW : ",this.state);
}