Reset Page to top position with react-pose.

[aprather51]

Summary

The goal is to reproduce VilhelmNielsen's react-pose inside gatsby-browser.js with Kyle Matthew's React Scroll Position so I can have page start at top while react-pose transition goes in effect. I am getting errors every time I try to reproduce it, I wasn't sure how I could use componentDidMount and I am running out of idea. Please help

VilhelmNielsen's react-pose on page transition

//gatsby-browser.js

import React from 'react'
import posed, { PoseGroup } from 'react-pose'
import Layout from './src/components/layout'

const Transition = posed.div({
  enter: { opacity: 1, delay: 300, beforeChildren: true },
  exit: { opacity: 0 },
})

export const replaceComponentRenderer = ({ props, ...other }) => {
  const { component } = props.pageResources
  return (
    <Layout>
      <PoseGroup>
        <Transition key={props.location.key}>
          {React.createElement(component, props)}
        </Transition>
      </PoseGroup>
    </Layout>
  )
}

Kyle Matthew page scroll on top after reload

//gatsby-browser.js

exports.shouldUpdateScroll = args => {
  const windowWidth = window.innerWidth
  // Scroll position only matters on mobile as on larger screens, we use a
  // modal.
  if (windowWidth < 750) {
    return true
  } else {
    return false
  }
}

exports.onInitialClientRender = () => {
  window.___GATSBYGRAM_INITIAL_RENDER_COMPLETE = true
}

Environment

"dependencies": {
        "babel-plugin-polished": "^1.1.0",
        "gatsby": "^2.0.33",
        "gatsby-image": "^2.0.20",
        "gatsby-plugin-layout": "^1.0.10",
        "gatsby-plugin-manifest": "^2.0.10",
        "gatsby-plugin-netlify": "^2.0.5",
        "gatsby-plugin-netlify-cms": "^3.0.8",
        "gatsby-plugin-page-transitions": "^1.0.7",
        "gatsby-plugin-polished": "^1.0.3",
        "gatsby-plugin-react-helmet": "^3.0.2",
        "gatsby-plugin-resolve-src": "^2.0.0-beta.1",
        "gatsby-plugin-sharp": "^2.0.13",
        "gatsby-plugin-styled-components": "^3.0.3",
        "gatsby-remark-copy-linked-files": "^2.0.7",
        "gatsby-remark-images": "^3.0.0",
        "gatsby-remark-relative-images": "^0.2.1",
        "gatsby-source-filesystem": "^2.0.8",
        "gatsby-transformer-remark": "^2.1.13",
        "gatsby-transformer-sharp": "^2.1.8",
        "netlify-cms": "^2.2.1",
        "polished": "^2.3.0",
        "react": "^16.6.3",
        "react-dom": "^16.5.1",
        "react-helmet": "^5.2.0",
        "react-pose": "^4.0.3",
        "react-slideshow-image": "^1.0.8",
        "rimraf": "^2.6.2",
        "styled-components": "^4.1.1",
        "styled-normalize": "^8.0.4"
    }

Relevant information

• Scrolling to top on component render bvaughn/react-virtualized#871
• Reset Scroll Position after page is loaded #3249
• https://stackoverflow.com/questions/33188994/scroll-to-the-top-of-the-page-after-render-in-react-js

Thanks in advance

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[aprather51]

no responses, moving on...