From 72f761f8df16a6603099eee50aa638116d7e36b6 Mon Sep 17 00:00:00 2001 From: mstefaniakap <46441806+mstefaniakap@users.noreply.github.com> Date: Thu, 14 Mar 2019 19:14:39 +0100 Subject: [PATCH] Add skipInitialTransition prop (#29) * Added skipInitialTransition prop * Updated README.md to contain info about skipInitialTransition prop * Added example called skip-initial-transition --- README.md | 4 ++ examples/skip-initial-transition/.babelrc | 3 ++ examples/skip-initial-transition/package.json | 11 +++++ .../skip-initial-transition/pages/_app.js | 45 +++++++++++++++++++ .../pages/_document.js | 32 +++++++++++++ .../skip-initial-transition/pages/about.js | 20 +++++++++ .../skip-initial-transition/pages/index.js | 18 ++++++++ src/PageTransition.js | 8 ++-- 8 files changed, 138 insertions(+), 3 deletions(-) create mode 100644 examples/skip-initial-transition/.babelrc create mode 100644 examples/skip-initial-transition/package.json create mode 100644 examples/skip-initial-transition/pages/_app.js create mode 100644 examples/skip-initial-transition/pages/_document.js create mode 100644 examples/skip-initial-transition/pages/about.js create mode 100644 examples/skip-initial-transition/pages/index.js diff --git a/README.md b/README.md index ed76b2c..f496a58 100644 --- a/README.md +++ b/README.md @@ -237,6 +237,10 @@ to gain a deeper sense of how this component works. so that programmatic scrolling can be disabled while a page is transitioning out. Defaults to false, since this potentially sketchy behavior should be opt-in. +* **`skipInitialTransition`**: Specifies if page transition will be omitted on + first mount. If you want to have transitions only between pages, not on + first page load, set `skipInitialTransition` to `true`. By default, + `skipInitialTransition` is set to `false`. ### Contributing diff --git a/examples/skip-initial-transition/.babelrc b/examples/skip-initial-transition/.babelrc new file mode 100644 index 0000000..1ff94f7 --- /dev/null +++ b/examples/skip-initial-transition/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["next/babel"] +} diff --git a/examples/skip-initial-transition/package.json b/examples/skip-initial-transition/package.json new file mode 100644 index 0000000..180538f --- /dev/null +++ b/examples/skip-initial-transition/package.json @@ -0,0 +1,11 @@ +{ + "scripts": { + "dev": "next dev" + }, + "dependencies": { + "next": "^8.0.3", + "next-page-transitions": "*", + "react": "^16.8.4", + "react-dom": "^16.8.4" + } +} diff --git a/examples/skip-initial-transition/pages/_app.js b/examples/skip-initial-transition/pages/_app.js new file mode 100644 index 0000000..801bc86 --- /dev/null +++ b/examples/skip-initial-transition/pages/_app.js @@ -0,0 +1,45 @@ +import App, { Container } from 'next/app' +import React from 'react' + +import { PageTransition } from 'next-page-transitions' + +export default class MyApp extends App { + static async getInitialProps({ Component, ctx }) { + let pageProps = {} + + if (Component.getInitialProps) { + pageProps = await Component.getInitialProps(ctx) + } + + return { pageProps } + } + + render() { + const { Component, pageProps } = this.props + return ( + + + + + + + ) + } +} diff --git a/examples/skip-initial-transition/pages/_document.js b/examples/skip-initial-transition/pages/_document.js new file mode 100644 index 0000000..34dd31d --- /dev/null +++ b/examples/skip-initial-transition/pages/_document.js @@ -0,0 +1,32 @@ +import React from 'react' +import Document, { Head, Main, NextScript } from 'next/document' + +export default class MyDocument extends Document { + static async getInitialProps(ctx) { + const initialProps = await Document.getInitialProps(ctx) + return { ...initialProps } + } + + render() { + return ( + + + + + + +
+ + + + ) + } +} diff --git a/examples/skip-initial-transition/pages/about.js b/examples/skip-initial-transition/pages/about.js new file mode 100644 index 0000000..6b53d71 --- /dev/null +++ b/examples/skip-initial-transition/pages/about.js @@ -0,0 +1,20 @@ +import React, { Fragment } from 'react' +import Link from 'next/link' + +const About = () => ( + +
+

About us

+ + Go back home + + +
+ +) + +export default About diff --git a/examples/skip-initial-transition/pages/index.js b/examples/skip-initial-transition/pages/index.js new file mode 100644 index 0000000..38089bb --- /dev/null +++ b/examples/skip-initial-transition/pages/index.js @@ -0,0 +1,18 @@ +import React from 'react' +import Link from 'next/link' + +const Index = () => ( +
+

Hello, world!

+ + About us + + +
+) + +export default Index diff --git a/src/PageTransition.js b/src/PageTransition.js index d5cc15f..b356c5b 100644 --- a/src/PageTransition.js +++ b/src/PageTransition.js @@ -61,7 +61,7 @@ class PageTransition extends React.Component { const { children } = props this.state = { - state: 'enter', + state: (props.skipInitialTransition) ? 'init' : 'enter', isIn: !shouldDelayEnter(children), currentChildren: children, nextChildren: null, @@ -195,7 +195,7 @@ class PageTransition extends React.Component { } render() { - const { timeout, loadingComponent, loadingCallbackName } = this.props + const { timeout, loadingComponent, loadingCallbackName, skipInitialTransition } = this.props const { renderedChildren: children, state } = this.state if (['entering', 'exiting', 'exited'].indexOf(state) !== -1) { @@ -212,7 +212,7 @@ class PageTransition extends React.Component { this.onEnter()} onEntering={() => this.onEntering()} onEntered={() => this.onEntered()} @@ -266,6 +266,7 @@ PageTransition.propTypes = { }, /* eslint-enable react/require-default-props */ monkeyPatchScrolling: PropTypes.bool, + skipInitialTransition: PropTypes.bool, } PageTransition.defaultProps = { @@ -273,6 +274,7 @@ PageTransition.defaultProps = { loadingCallbackName: 'pageTransitionReadyToEnter', loadingDelay: 500, monkeyPatchScrolling: false, + skipInitialTransition: false, } export default PageTransition