Skip to content

Instantly share code, notes, and snippets.

@guillermo
Last active May 9, 2019 07:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save guillermo/ab170c5fd54501b8ae8cdc0dc559a466 to your computer and use it in GitHub Desktop.
Save guillermo/ab170c5fd54501b8ae8cdc0dc559a466 to your computer and use it in GitHub Desktop.
Get windows size inside the component.
import React from 'react'
import Logo from '../Logo';
import Background from '../Background';
import Header from '../Header';
import Stats from '../Stats';
import Timeline from '../Timeline';
import useWindowSize from '../../effects/useWindowSize';
export default () => {
let [width,height] = useWindowSize()
return (<>
<Background width={width} height={height}/>
<Header width={width} height={150}/>
<Stats width={width} height={100} top={150}></Stats>
<Timeline width={width} height={height - 250} top={250}/>
</>
)
}
import {useState,useEffect} from 'react'
function getSize() {
return {
height: window.innerHeight,
width: window.innerWidth,
};
}
export default function useWindowSize() {
let [windowSize, setWindowSize] = useState(getSize());
function handleResize() {
setWindowSize(getSize());
}
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);
return [windowSize.width, windowSize.height];
}
g
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment