isaacbythewood.com-nextjs

 1import React, { createRef } from "react";
 2import App from "next/app";
 3import "../styles/globals.css";
 4import { TransitionGroup, CSSTransition } from "react-transition-group";
 5
 6import Grid from "../components/grid";
 7import Sidebar from "../components/sidebar";
 8import Menu from "../components/menu";
 9import Loader from "../components/loader";
10import Mouse from "../components/mouse";
11
12class MyApp extends App {
13  constructor(props) {
14    super(props);
15    this.transitionNodeRefs = new Map();
16  }
17
18  getNodeRef(route) {
19    if (!this.transitionNodeRefs.has(route)) {
20      this.transitionNodeRefs.set(route, createRef());
21    }
22    return this.transitionNodeRefs.get(route);
23  }
24
25  render() {
26    const { Component, pageProps, router } = this.props;
27    const nodeRef = this.getNodeRef(router.route);
28
29    return (
30      <>
31        <Mouse />
32        <Loader />
33        <Sidebar />
34        <Menu />
35        <TransitionGroup component={null}>
36          <CSSTransition
37            key={router.route}
38            appear
39            timeout={250}
40            classNames="transition"
41            nodeRef={nodeRef}
42          >
43            <div className="transition" ref={nodeRef}>
44              <Grid>
45                <Component {...pageProps} />
46              </Grid>
47            </div>
48          </CSSTransition>
49        </TransitionGroup>
50      </>
51    );
52  }
53}
54
55export default MyApp;