react-transition-group#TransitionGroup JavaScript Examples

NotFoundPage = ({ location }) => {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    const timeout = setTimeout(() => setIsMounted(true), navDelay);
    return () => clearTimeout(timeout);
  }, []);

  return (
    <Layout location={location}>
      <TransitionGroup component={null}>
        {isMounted && (
          <CSSTransition timeout={500} classNames="fade">
            <StyledMainContainer className="fillHeight">
              <StyledTitle>404</StyledTitle>
              <StyledSubtitle>Page Not Found</StyledSubtitle>
              <StyledHomeButton to="/">Go Home</StyledHomeButton>
            </StyledMainContainer>
          </CSSTransition>
        )}
      </TransitionGroup>
    </Layout>
  );
}

withTransition = (
	Component,
	{ trigger, TransitionComponent = CSSTransition },
) => {
	const WithTransition = ({ transition, ...otherProps }) => {
		const visibilityTrigger = otherProps[trigger];

		if (transition) {
			return (
				<TransitionGroup>
					{visibilityTrigger && (
						<TransitionComponent {...transition} in={visibilityTrigger}>
							<Component {...otherProps} />
						</TransitionComponent>
					)}
				</TransitionGroup>
			);
		}

		return visibilityTrigger && <Component {...otherProps} />;
	};

	WithTransition.propTypes = {
		transition: transitionShape,
	};

	return WithTransition;
}

NotificationStack = ({
	notifications,
	renderNotification,
	transition = defaultTransition,
	className,
	...otherProps
}) => (
	<Portal container={getParentContainer()} {...otherProps}>
		<TransitionGroup className={cx('notification-stack', className)}>
			{map(
				notification => (
					<CSSTransition key={`transition-${notification.id}`} {...transition}>
						<div>
							{renderNotification({
								...notification,
								key: `notification-${notification.id}`,
							})}
						</div>
					</CSSTransition>
				),
				notifications,
			)}
		</TransitionGroup>
	</Portal>
)

render() {
    return (
      <div>
        <div className="trigger" onClick={this.toggle}>Toggle</div>
        <TransitionGroup component="div">
          {this.state.showItem ? this.props.children : null}
        </TransitionGroup>
      </div>
    );
  }

Transition = ({ children, className, style, transition, ...rest }) => {
  const Component = transitions[transition];

  if (!Component) {
    console.error(`Invalid transition: ${transition}`); //eslint-disable-line no-console
    return null;
  }

  return (
    <TransitionGroup className={className} style={style}>
      {React.Children.map(children, child => (
        <CSSTransition classNames={classNames[transition]} {...rest}>
          <Component>{child}</Component>
        </CSSTransition>
      ))}
    </TransitionGroup>
  );
}

function AppBody({ store }) {
  const location = useLocation();

  return (
    <TransitionGroup enter={location.pathname !== "/"} exit={location.pathname === "/"}>
      <CSSTransition key={location.pathname} classNames="fade" timeout={300}>
        <Switch location={location}>
          <Route path="/settings">
            <SettingsView store={store} />
          </Route>
          <Route path="/json-config">
            <JsonConfigView store={store} />
          </Route>
          <Route path="/">
            <SearchView store={store} />
          </Route>
        </Switch>
      </CSSTransition>
    </TransitionGroup>
  );
}

render() {
    return (
      <div className={css.root}>
        <TransitionGroup component={FirstChild}>
          {this.shouldShowNotification() ? this.renderNotification() : null}
        </TransitionGroup>
      </div>
    );
  }

AnimatedSwitch = withRouter(({ location }) => (
  <TransitionGroup>
    <CSSTransition
      key={location.key}
      timeout={{
        enter: 400,
        exit: 400,
      }}
      classNames="page"
      unmountOnExit
    >
      <Switch location={location}>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/portfolio" component={Portfolio} />
        <Route path="/contact" component={ContactUs} />
        <Route path="*" component={Home} />
      </Switch>
    </CSSTransition>
  </TransitionGroup>
))

render() {
    const results = this.matches().map((result, i) => (
      <CSSTransition
        key={i}
        classNames="result"
        timeout={{ enter: 500, exit: 300 }}
        nodeRef={this.wrappers(result)}
      >
        <li ref={this.wrappers(result)}>{result}</li>
      </CSSTransition>
    ));

    return (
      <div>
        <h1>Autocomplete</h1>
        <div className="auto">
          <input
            onChange={this.handleInput}
            value={this.state.inputVal}
            placeholder="Search..."
          />
        </div>
        <ul onClick={this.selectName}>
          <TransitionGroup>{results}</TransitionGroup>
        </ul>
      </div>
    );
  }

Side = ({ children, isHome, orientation }) => {
  const [isMounted, setIsMounted] = useState(!isHome);

  useEffect(() => {
    if (!isHome) {
      return;
    }
    const timeout = setTimeout(() => setIsMounted(true), loaderDelay);
    return () => clearTimeout(timeout);
  }, []);

  return (
    <StyledContainer orientation={orientation}>
      <TransitionGroup component={null}>
        {isMounted && (
          <CSSTransition classNames={isHome ? 'fade' : ''} timeout={isHome ? loaderDelay : 0}>
            {children}
          </CSSTransition>
        )}
      </TransitionGroup>
    </StyledContainer>
  );
}

AnimatedRoutes = ({ children }) => {
  const location = useLocation()

  return (
    <TransitionGroup component={null}>
      <CSSTransition key={location.pathname} classNames="page" timeout={200}>
        <Section>
          <Routes location={location}>{children}</Routes>
        </Section>
      </CSSTransition>
    </TransitionGroup>
  )
}

render() {
    const { title, segments, width } = this.props
    const { selected } = this.state
    
    return (
      <React.Fragment>
        <h2 className={ styles.title } style={{ width: width - 40 }}>{ title }</h2>
        <div className={ styles.selector }>
          { segments.map(({ title }) => (
            <p
              className={ selected === title ? styles.selected : '' }
              onClick={ () => this.setState({ selected: title }) }
              key={ title }
            >
              { title }
            </p>
          )) }
        </div>
        <TransitionGroup style={{ position: 'relative' }}>
          { segments.map(({ title, component }) => selected === title && (
            <CSSTransition
              key={ title }
              classNames='absolute delayed-enter fade'
              timeout={ 250 }
            >
              { component }
            </CSSTransition>
          ))}
        </TransitionGroup>
      </React.Fragment>
    )
  }

render() {
    const {value} = this.state;
    const {toggleSearch} = this.props;
    const {isOpen, pending, type, items} = this.props.searchResults;
    return (
      <React.Fragment>
        <TransitionGroup>
          {isOpen &&
            <CSSTransition
              timeout={800}
              classNames="search__input-container"
            >
              <SearchInput
                value={value}
                updateSearchValue={this.updateSearchValue}
                pending={pending}
                close={toggleSearch}
              />
            </CSSTransition>
          }
          {value !== "" && isOpen &&
            <CSSTransition
              timeout={800}
              classNames="search__results"
            >
              <SearchResults
                value={value}
                close={toggleSearch}
                switchTab={this.switchTab}
                type={type}
                items={items}
                pending={pending}
              />
            </CSSTransition>
          }
        </TransitionGroup>
      </React.Fragment>
    );
  }

render() {
    return (
      <TransitionGroup component={null}>
        {this.state.items.map(item => {
          return (
            <CSSTransition
              key={item.id}
              timeout={800}
              classNames="alert"
            >
              <div className="alert">
                <AlertMessage
                  id={item.id}
                  message={item.message}
                  remove={this.removeAlert}
                />
              </div>
            </CSSTransition>
          );
        })}
      </TransitionGroup>
    );
  }

LayoutContent = (props) => {
  const { role, location } = props;
  const { pathname } = location;
  const handleFilter = (route) => {
    // 过滤没有权限的页面
    return role === "admin" || !route.roles || route.roles.includes(role);
  };
  return (
    <DocumentTitle title={getPageTitle(menuList, pathname)}>
      <Content style={{ height: "calc(100% - 100px)" }}>
        <TransitionGroup>
          <CSSTransition
            key={location.pathname}
            timeout={500}
            classNames="fade"
            exit={false}
          >
            <Switch location={location}>
              <Redirect exact from="/" to="/dashboard" />
              {routeList.map((route) => {
                return (
                  handleFilter(route) && (
                    <Route
                      component={route.component}
                      key={route.path}
                      path={route.path}
                    />
                  )
                );
              })}
              <Redirect to="/error/404" />
            </Switch>
          </CSSTransition>
        </TransitionGroup>
      </Content>
    </DocumentTitle>
  );
}

Modal = props => {
  const { children, onClose, isOpen } = props;

  return (
    <TransitionGroup component={null}>
      {isOpen && (
        <CSSTransition classNames="modal" timeout={200}>
          <div className="modal-wrapper">
            <div className="modal">
              <div className="modalHeader">
                <Icon
                  icon={{ icon: 'close', size: 'large' }}
                  onClick={() => onClose()}
                />
              </div>
              <div className="modalBody">{children}</div>
            </div>
            <div className="modal-footer">&nbsp;</div>
          </div>
        </CSSTransition>
      )}
    </TransitionGroup>
  );
}

CourseFinderList = ({
  title,
  count,
  courseList,
  loading = false,
  setLoading,
}) => {
  const { getQueryString, setQueryString } = useQueryString()
  const pageNo = getQueryString('p') || 1

  const handlePageChange = (page) => {
    setLoading(true)
    setQueryString('p', page)
  }

  return (
    <>
      <PageHeading>
        <PageTitle>{title}</PageTitle>
        {!loading && <PageSubtitle>{count}&nbsp;results</PageSubtitle>}
      </PageHeading>

      <CardSplitSkeleton active={loading} />
      <NotFoundSearch active={!loading && !count} />

      <TransitionGroup>
        {!loading &&
          courseList?.map((courseData) => (
            <CSSTransition
              key={courseData.code}
              timeout={200}
              unmountOnExit
              classNames="card"
            >
              <CardTransition>
                <CourseItem courseData={courseData} />
              </CardTransition>
            </CSSTransition>
          ))}
      </TransitionGroup>

      {!loading && (
        <Pagination
          defaultPageSize="10"
          defaultCurrent={pageNo}
          responsive
          showSizeChanger={false}
          hideOnSinglePage
          onChange={handlePageChange}
          total={count}
        />
      )}
    </>
  )
}

render() {
    const { store, history } = this.props;
    return (
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <Route
            render={({ location }) => (
              <div style={{ height: '100%' }}>
                <TransitionGroup className={styles.wrapper}>
                  <CSSTransition
                    key={location.pathname}
                    classNames="fade"
                    timeout={250}
                  >
                    <section
                      className={[styles.wrapperSection, 'app-router'].join(' ')}
                    >
                      <Switch location={location}>
                        <Route path="/login" component={Login} />
                        <Route path='/captcha' component={Captcha} />
                        <Route path="/app/:page?" component={ props => <App {...props} store={ store }/> } />
                        <Route path="/" render={() => <div />} />
                      </Switch>
                    </section>
                  </CSSTransition>
                </TransitionGroup>
                <div className={styles.windowHeader}>
                  {remote.process.platform === 'win32' && (
                    <div className={styles.windowControls}>
                      <Button
                        width={35}
                        height={22}
                        src={MinimizeButton}
                        hoverSrc={MinimizeButtonHover}
                        onClick={() => remote.getCurrentWindow().minimize()}
                      />
                      <Button
                        width={35}
                        height={22}
                        src={MaximizeButton}
                        hoverSrc={MaximizeButtonHover}
                        onClick={() => remote.getCurrentWindow().maximize()}
                        disabled={location.pathname !== '/app'}
                      />
                      <Button
                        width={35}
                        height={22}
                        src={CloseButton}
                        hoverSrc={CloseButtonHover}
                        onClick={() => remote.getCurrentWindow().close()}
                      />
                    </div>
                  )}
                </div>
              </div>
            )}
          />
        </ConnectedRouter>
      </Provider>
    );
  }

render() {
    let { modal } = this.state;
    let { props } = this;

    return (
      <React.Fragment>
        <div
          className="frf-trigger-button"
          style={{
            background: props.primaryColor,
            color: props.textColor,
            zIndex: parseInt(props.zIndex),
          }}
          onClick={this.triggerModal}
        >
          <div
            className={modal ? "frf-feedback-icon-open" : "frf-feedback-icon"}
            style={{
              fill: props.textColor,
            }}
          >
            {modal ? <CloseIcon /> : <FeedbackIcon />}
          </div>
        </div>
        <TransitionGroup component={null}>
          {modal && (
            <CSSTransition
              in={modal}
              classNames="frf-dialog"
              timeout={{
                enter: 300,
                exit: 300,
              }}
            >
              <Modal
                email={props.email}
                subProject={props.subProject}
                emailRequired={props.emailRequired}
                emailDefaultValue={props.emailDefaultValue}
                projectName={props.projectName}
                projectId={props.projectId}
                feedbackTypes={props.feedbackTypes}
                primaryColor={props.primaryColor}
                textColor={props.textColor}
                hoverBorderColor={props.hoverBorderColor}
                postSubmitButtonMsg={props.postSubmitButtonMsg}
                submitButtonMsg={props.submitButtonMsg}
                triggerModal={this.triggerModal}
                modalOpen={this.state.modal}
                zIndex={props.zIndex}
              />
            </CSSTransition>
          )}
        </TransitionGroup>
      </React.Fragment>
    );
  }

render() {
    const { palettes, classes } = this.props;
    const { openDeleteDialog } = this.state;
    return (
      <div className={classes.root}>
        <div className={classes.container}>
          <nav className={classes.nav}>
            <h1 className={classes.heading}>FLAT UI COLORS</h1>
            <Link to='/palette/new'>Create Palette</Link>
          </nav>
          <TransitionGroup className={classes.palettes}>
            {palettes.map((palette) => (
              <CSSTransition key={palette.id} classNames='fade' timeout={500}>
                <MiniPalette
                  {...palette}
                  goToPalette={this.goToPalette}
                  openDialog={this.openDialog}
                  key={palette.id}
                  id={palette.id}
                />
              </CSSTransition>
            ))}
          </TransitionGroup>
        </div>
        <Dialog
          open={openDeleteDialog}
          aria-labelledby='delete-dialog-title'
          onClose={this.closeDialog}
        >
          <DialogTitle id='delete-dialog-title'>Delete This Icon?</DialogTitle>
          <List>
            <ListItem button onClick={this.handleDelete}>
              <ListItemAvatar>
                <Avatar
                  style={{ backgroundColor: blue[100], color: blue[600] }}
                >
                  <CheckIcon />
                </Avatar>
              </ListItemAvatar>
              <ListItemText primary='Delete'></ListItemText>
            </ListItem>
            <ListItem button onClick={this.closeDialog}>
              <ListItemAvatar>
                <Avatar style={{ backgroundColor: red[100], color: red[600] }}>
                  <CloseIcon />
                </Avatar>
              </ListItemAvatar>
              <ListItemText primary='Cancel'></ListItemText>
            </ListItem>
          </List>
        </Dialog>
      </div>
    );
  }

render() {
    const { location, store } = this.props;
    const { pathname, fullScreen } = this.state;
    return (
      <div
        className={['container', 'horizontal', styles.outerContainer].join(' ')}
      >
        <div className={ styles.loader }>
        
        </div>
        <div className={styles.sidebar}>
          {remote.process.platform === 'darwin' && (
            <div
              className={styles.trafficLights}
              style={{ height: fullScreen ? '1em' : '2em' }}
            />
          )}
          {Object.keys(this.pages).map(page => (
            <a
              key={page}
              className={css({
                [styles.navigator]: true,
                [styles.selected]: pathname.substring(1) === page.toLowerCase()
              })}
              onClick={() =>
                this.setState({ pathname: `/${page.toLowerCase()}` })
              }
              onKeyDown={() => {}}
              role="presentation"
            >
              <img
                className={styles.navigator}
                src={this.pages[page].icon}
                alt=""
              />
            </a>
          ))}
          <img className={styles.logo} src={Logo} alt="" />
          <div className={styles.captcha} onClick={ () => ipc.send('captcha.open') }>
            <img className={styles.captchaLogo} src={captchaLogo} alt="" />
          </div>
        </div>

        <TransitionGroup className={styles.container}>
          <CSSTransition key={pathname} classNames="fade" timeout={250}>
            <section className={styles.wrapper}>
              <Switch location={Object.assign({}, location, { pathname })}>
                <Route path="/dashboard" component={ props => <Dashboard { ...props } store={ store } /> }/>
                <Route path="/tasks" component={ props => <Tasks { ...props } store={ store } /> } />
                <Route path="/profiles" component={ props => <Profiles { ...props } store={ store } /> } />
                <Route path="/proxies" component={ props => <Proxies { ...props } store={ store } /> } />
                <Route path="/settings" component={ props => <Settings { ...props } store={ store } /> } />
                <Route path="/" render={() => <div>Not Found?</div>} />
              </Switch>
            </section>
          </CSSTransition>
        </TransitionGroup>
      </div>
    );
  }

render() {
    return (
      <Route
        render={({ location }) => (
          <TransitionGroup>
            <CSSTransition key={location.key} classNames='page' timeout={500}>
              <Switch location={location}>
                <Route
                  exact
                  path='/palette/new'
                  render={(routeProps) => (
                    <Page>
                      <NewPaletteForm
                        savePalette={this.savePalette}
                        palettes={this.state.palettes}
                        {...routeProps}
                      />
                    </Page>
                  )}
                />
                <Route
                  exact
                  path='/palette/:paletteId/:colorId'
                  render={(routeProps) => (
                    <Page>
                      <SingleColorPalette
                        colorId={routeProps.match.params.colorId}
                        palette={generatePalette(
                          this.findPalette(routeProps.match.params.paletteId)
                        )}
                      />
                    </Page>
                  )}
                />
                <Route
                  exact
                  path='/'
                  render={(routeProps) => (
                    <Page>
                      <PaletteList
                        palettes={this.state.palettes}
                        deletePalette={this.deletePalette}
                        {...routeProps}
                      />
                    </Page>
                  )}
                />
                <Route
                  exact
                  path='/palette/:id'
                  render={(routeProps) => (
                    <Page>
                      <Palette
                        palette={generatePalette(
                          this.findPalette(routeProps.match.params.id)
                        )}
                      />
                    </Page>
                  )}
                />
                <Route
                  render={(routeProps) => (
                    <Page>
                      <PaletteList
                        palettes={this.state.palettes}
                        deletePalette={this.deletePalette}
                        {...routeProps}
                      />
                    </Page>
                  )}
                />
              </Switch>
            </CSSTransition>
          </TransitionGroup>
        )}
      />
    );
  }

render() {
    // console.log('3-render-----组件挂载中');
    return (
      <Fragment>
        <div>
          <label htmlFor="ipt">增加服务</label>
          <input
            id="ipt"
            className="input"
            value={this.state.inputVal}
            onChange={this.inputChange.bind(this)}
            ref={(input) => { this.input = input }}
          />
          <button onClick={this.addFriendsList.bind(this)}>增加小朋友</button>
        </div>
        <ul ref={(ul) => { this.ul = ul }}>
          <TransitionGroup>
            {
              this.state.list.map((item, index) => {
                return (
                  <CSSTransition
                    timeout={1000}
                    classNames='boss-text'
                    unmountOnExit
                    appear={true}
                    key={index + item}
                  >
                    <FriendListItem
                      key={index + item}
                      idx={index}
                      content={item}
                      index={index}
                      deleteItem={this.deleteItem}
                    />
                  </CSSTransition>
                )
              })
            }
          </TransitionGroup>
        </ul>
      </Fragment>
    )
  }

function RenderRouterHook() {
  const resolvePath = (uPath, routePath) => {
    if (isExternal(routePath)) {
      return routePath
    }
    if (isExternal(uPath)) {
      return uPath
    }
    return path.resolve(uPath, routePath)
  }
  let routerArr = []
  const renderRouterFunc = (asyncRouter, uPath) => {
    for (const item of asyncRouter) {
      if (item.hasOwnProperty('children')) {
        item.children.forEach((fItem) => {
          routerArr.push(
            <Route
              component={asyncImport(fItem.component)}
              exact
              key={fItem.path}
              path={resolvePath(item.path, fItem.path)}
            />
          )
          if (fItem.hasOwnProperty('children')) {
            renderRouterFunc(fItem.children, resolvePath(item.path, fItem.path))
          }
        })
      } else {
        routerArr.push(
          <Route component={asyncImport(item.component)} exact key={item.path} path={resolvePath(uPath, item.path)} />
        )
      }
      if (item.redirect) routerArr.push(<Redirect exact={true} path={item.path} to={item.redirect} />)
    }
  }
  useEffect(() => {
    renderRouterFunc(asyncRouters, '/')
  }, [])
  return (
    <Fragment>
      {/*动画有点问题*/}
      <TransitionGroup>
        <CSSTransition classNames="fade-main" timeout={300}>
          <Switch>
            {routerArr}
            <Redirect exact={true} path="/" to="/dashboard" />
          </Switch>
        </CSSTransition>
      </TransitionGroup>
    </Fragment>
  )
}

render() {
    return (
      <div
        className={[
          s.root,
          'sidebar-' + this.props.sidebarPosition,
          'sidebar-' + this.props.sidebarVisibility,
        ].join(' ')}
      >
        <div className={s.wrap}>
          <Header />
          {/* <Chat chatOpen={this.state.chatOpen} /> */}
          {/* <Helper /> */}
          <Sidebar />
          <Hammer onSwipe={this.handleSwipe}>
            <main className={s.content}>
              <BreadcrumbHistory url={this.props.location.pathname} />
              <TransitionGroup>
                <CSSTransition
                  key={this.props.location.key}
                  classNames="fade"
                  timeout={200}
                >
                  <Switch>
                    <Route path="/app/main" exact render={() => <Redirect to="/app/main/dashboard" />} />
                    <Route path="/app/main/dashboard" exact component={Dashboard} />
                    <Route path="/app/components/icons" exact component={UIIcons} />
                    <Route path="/app/notifications" exact component={UINotifications} />
                    <Route path="/app/components/charts" exact component={Charts} />
                    <Route path="/app/tables" exact component={TablesStatic} />
                    <Route path="/app/components/maps" exact component={MapsGoogle} />
                    <Route path="/app/typography" exact component={CoreTypography} />
                  </Switch>
                </CSSTransition>
              </TransitionGroup>
              <footer className={s.contentFooter}>
                Light Blue React Template - React admin template made by <a href="https://flatlogic.com" >Flatlogic</a>
              </footer>
            </main>
          </Hammer>
        </div>
      </div>
    );
  }

About = () => {
  const location = useLocation()

  return (
    <div className="About">
      <div className="About-tabs">
        <NavLink
          to="/about/people"
          className="About-tab"
          activeClassName="active"
        >
          People
        </NavLink>
        <NavLink
          to="/about/offices"
          className="About-tab"
          activeClassName="active"
        >
          Offices
        </NavLink>
      </div>
      <TransitionGroup className="About-tabContent">
        <CSSTransition
          key={location.key}
          classNames="fade"
          timeout={500}
        >
          <Switch location={location}>
            <Route path="/about/people">
              <People />
            </Route>
            <Route path="/about/offices">
              <Offices />
            </Route>
            <Redirect to="/about/people" />
          </Switch>
        </CSSTransition>
      </TransitionGroup>
    </div>
  )
}

FixedRewards = ({ reward, rootRef, containerRef }) => {
  const [ visible, setVisible ] = useState(false)

  const onScroll = useCallback(() => {
    if (!rootRef.current || !containerRef.current) return
    const offset = Math.min(200, window.innerHeight / 5) * -1
    const containerTop = containerRef.current.getBoundingClientRect().top - window.innerHeight - (offset * 1.5)
    const top = rootRef.current.getBoundingClientRect().top - window.innerHeight - offset
    if (visible && top < 0) {
      setVisible(false)
    } else if (visible && containerTop >= 0) {
      setVisible(false)
    } else if (!visible && top >= 0 && containerTop < 0) {
      setVisible(true)
    }
  }, [ rootRef, containerRef, visible ])

  useEffect(() => {
    if (rootRef.current && containerRef.current) {
      onScroll()
      window.addEventListener('scroll', onScroll)
      window.addEventListener('touchmove', onScroll)
      window.addEventListener('resize', onScroll)
    }

    return () => {
      window.removeEventListener('scroll', onScroll)
      window.removeEventListener('touchmove', onScroll)
      window.removeEventListener('resize', onScroll)
    }
  }, [ rootRef, containerRef, visible ])

  return (
    <TransitionGroup>
      {visible &&
        <CSSTransition
          key='fixed-results'
          timeout={300}
          classNames='fixed-results'
        >
          <FixedRewardsContainer>
            <Box textAlign='center'>
              <h4>{reward.labels.yearly} {reward.title}</h4>
            </Box>
            <FixedRewardsContent>
              <div>
                <p>{reward.labels.currency} ({reward.labels.currencySymbol})</p>
                <p><strong>{reward.labels.currencySymbol} {reward.breakdown.yearly.currency}</strong></p>
              </div>
              {reward.labels.currency !== reward.labels.ada &&
                <div className='ada-rewards'>
                  <p>{reward.labels.ada} ({reward.labels.adaSymbol})</p>
                  <p><strong>{reward.labels.adaSymbol} {reward.breakdown.yearly.ada}</strong></p>
                </div>
              }
              {reward.labels.yield !== null &&
                <div>
                  <p>{reward.labels.yield}</p>
                  <p><strong>{reward.breakdown.yearly.yield}</strong></p>
                </div>
              }
            </FixedRewardsContent>
            <div className='logo'>
              <CardanoLogo active={false} />
            </div>
          </FixedRewardsContainer>
        </CSSTransition>
      }
    </TransitionGroup>
  )
}

Hero = ({ data }) => {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    const timeout = setTimeout(() => setIsMounted(true), navDelay);
    return () => clearTimeout(timeout);
  }, []);

  const { frontmatter, html } = data[0].node;

  const one = () => (
    <StyledOverline style={{ transitionDelay: '100ms' }}>{frontmatter.title}</StyledOverline>
  );
  const two = () => (
    <StyledTitle style={{ transitionDelay: '200ms' }}>{frontmatter.name}.</StyledTitle>
  );
  const three = () => (
    <StyledSubtitle style={{ transitionDelay: '300ms' }}>{frontmatter.subtitle}</StyledSubtitle>
  );
  const four = () => (
    <StyledDescription
      style={{ transitionDelay: '400ms' }}
      dangerouslySetInnerHTML={{ __html: html }}
    />
  );
  const five = () => (
    <div style={{ transitionDelay: '500ms' }}>
      <StyledEmailLink href={`mailto:${email}`}>Get In Touch</StyledEmailLink>
    </div>
  );

  const items = [one, two, three, four, five];

  return (
    <StyledContainer>
      <TransitionGroup component={null}>
        {isMounted &&
          items.map((item, i) => (
            <CSSTransition key={i} classNames="fadeup" timeout={loaderDelay}>
              {item}
            </CSSTransition>
          ))}
      </TransitionGroup>
    </StyledContainer>
  );
}

render() {
    const { isMounted, menuOpen, scrollDirection } = this.state;
    const { isHome } = this.props;
    const timeout = isHome ? loaderDelay : 0;
    const fadeClass = isHome ? 'fade' : '';
    const fadeDownClass = isHome ? 'fadedown' : '';

    return (
      <StyledContainer scrollDirection={scrollDirection}>
        <Helmet>
          <body className={menuOpen ? 'blur' : ''} />
        </Helmet>
        <StyledNav>
          <TransitionGroup component={null}>
            {isMounted && (
              <CSSTransition classNames={fadeClass} timeout={timeout}>
                <StyledLogo tabindex="-1">
                  {isHome ? (
                    <a href="/" aria-label="home">
                      <IconLogo />
                    </a>
                  ) : (
                    <Link to="/" aria-label="home">
                      <IconLogo />
                    </Link>
                  )}
                </StyledLogo>
              </CSSTransition>
            )}
          </TransitionGroup>

          <TransitionGroup component={null}>
            {isMounted && (
              <CSSTransition classNames={fadeClass} timeout={timeout}>
                <StyledHamburger onClick={this.toggleMenu}>
                  <StyledHamburgerBox>
                    <StyledHamburgerInner menuOpen={menuOpen} />
                  </StyledHamburgerBox>
                </StyledHamburger>
              </CSSTransition>
            )}
          </TransitionGroup>

          <StyledLink>
            <StyledList>
              <TransitionGroup component={null}>
                {isMounted &&
                  navLinks &&
                  navLinks.map(({ url, name }, i) => (
                    <CSSTransition key={i} classNames={fadeDownClass} timeout={timeout}>
                      <StyledListItem
                        key={i}
                        style={{ transitionDelay: `${isHome ? i * 100 : 0}ms` }}>
                        <StyledListLink to={url}>{name}</StyledListLink>
                      </StyledListItem>
                    </CSSTransition>
                  ))}
              </TransitionGroup>
            </StyledList>

            <TransitionGroup component={null}>
              {isMounted && (
                <CSSTransition classNames={fadeDownClass} timeout={timeout}>
                  <div style={{ transitionDelay: `${isHome ? navLinks.length * 100 : 0}ms` }}>
                    <StyledResumeButton
                      href="/resume"
                      rel="nofollow noopener noreferrer">
                      Resume
                    </StyledResumeButton>
                  </div>
                </CSSTransition>
              )}
            </TransitionGroup>
          </StyledLink>
        </StyledNav>

        <Menu menuOpen={menuOpen} toggleMenu={this.toggleMenu} />
      </StyledContainer>
    );
  }