Answers for "react screen size"

1

react responsive screen size

const MyComponent = () => {
  // Declare a new state variable with the "useState" Hook
  const [width, setWidth] = React.useState(window.innerWidth);
  const breakpoint = 620;

  React.useEffect(() => {
    /* Inside of a "useEffect" hook add an event listener that updates
       the "width" state variable when the window size changes */
    window.addEventListener("resize", () => setWidth(window.innerWidth));

    /* passing an empty array as the dependencies of the effect will cause this
       effect to only run when the component mounts, and not each time it updates.
       We only want the listener to be added once */
  }, []);

  return width < breakpoint ? <MobileComponent /> : <DesktopComponent />;
}
Posted by: Guest on June-20-2021
1

react get screen width

// 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>
  );
Posted by: Guest on January-17-2021
1

react js get screen size

console.log(window.innerHeight);
Posted by: Guest on December-17-2020
0

reacts screen width

class Main extends React.Component {
 constructor(props) {
    super(props);
    this.state = { windowWidth: window.innerWidth };
  }

 const handleResize = (e) => {
  this.setState({ windowWidth: window.innerWidth });
 };

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

 componentWillUnMount() {
  window.addEventListener("resize", this.handleResize);
 } 

  render() {
    const { windowWidth } = this.state; 
    return <div>Current window width: {windowWidth}</div>
  }
}
Posted by: Guest on October-25-2021

Code answers related to "react screen size"

Code answers related to "Javascript"

Browse Popular Code Answers by Language