React

by poooow

HTML

<div id="app"></div>

SCSS

#app {
  background-color: wheat;
}

#container {
  display: flex;
  justify-content: space-between;
  flex-direction: column;

  > div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20%;
  }

  > div:nth-child(2n) {
    background: tan;
  }
}

React

const useState = React.useState;
const useEffect = React.useEffect;

function App() {
  const [vh, setVh] = useState(window.innerHeight);

  useEffect(() => {
    const updateVh = () => {
      setVh(window.innerHeight);
    };

    window.addEventListener('resize', updateVh);

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

  return (
    <div id="container" style={{ height: vh }}>
      <div>20 %</div>
      <div>40 %</div>
      <div>60 %</div>
      <div>80 %</div>
      <div>100 %</div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('app'))