Get windows size inside the component.

life.js

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

useWindowSize.js

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