steveeeie / react-page-transition Goto Github PK

View Code? Open in Web Editor NEW

441.0 6.0 24.0 3.52 MB

A React component that makes it easy to use the page transitions from the Codedrops page transitions demo with React

Home Page: https://codesandbox.io/s/advanced-react-page-transition-demo-z8hmd

License: MIT License

TypeScript 100.00%

react page-transitions transitions animation react-transition-group react-router styled-components

react-page-transition's Introduction

React Page Transition

⚛️💨 A React component that makes it easy to use the page transitions from the Codedrops Page Transitions Demo See Original.

Usage with `react-router`

1. Install Package

npm install @steveeeie/react-page-transition

yarn add @steveeeie/react-page-transition

2. Install Dependencies

npm install react-router react-router-dom react-transition-group styled-components

yarn add react-router react-router-dom react-transition-group styled-components

3. Code Example

App.js

import React from 'react';
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';
import { PageTransition } from '@steveeeie/react-page-transition';
import './styles.css';

const Links = () => (
  <>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
  </>
);

const Home = props => <h1>Home</h1>;

const About = props => <h1>About</h1>;

export default function App() {
  return (
    <BrowserRouter>
      <Links />
      <Route
        render={({ location }) => {
          return (
            <PageTransition
              preset="moveToLeftFromRight"
              transitionKey={location.pathname}
            >
              <Switch location={location}>
                <Route exact path="/" component={Home} />
                <Route exact path="/about" component={About} />
              </Switch>
            </PageTransition>
          );
        }}
      />
    </BrowserRouter>
  );
}

Wrap your routes inside the PageTransition component and pass one of the preset names to the preset prop. View the advanced demo for the full list of presets.

You will also need to pass the current location.path to the transitionKey prop, this is so that the internal TransitionGroup can track which components are entering and exiting.

styles.css

html,
body,
#root {
  height: 100%;
}

PageTransition is styled with height: 100%. The parent containers need to be given a height for it to render correctly because of this.

Props

Prop	Required	Type	Description
`preset`	No	String	Sets the enter and exit animations *
`enterAnimation`	No	String	Sets the enter animation *
`exitAnimation`	No	String	Sets the exit animation *
`transitionKey`	Yes	Unique Identifier	Used internally to track which components are entering and exiting.

* View the advanced demo for the full list of presets and animations.

react-page-transition's People

Contributors

Stargazers

Watchers

react-page-transition's Issues

Set the duration programmatically

Great library.

I wonder if there is any way to set the duration.

I can see the values are hardcoded and no way to override any.

When adding 100% to the height, transitions work, but scrolling no longer does

So I've added the following to my style sheet:

html,
body,
#root {
  height: 100%;
}

The page shows up, the transitions work as expected, however I cannot scroll down on the page at all. Nothing "below the fold" shows at all.

How do I get around this?

Package import issue

Hey, your pacakge is very cool ! trying to implementing in my project but getting stuck in while importing package from node_module

error : "export 'default' (imported as 'PageTransition') was not found in '@steveeeie/react-page-transition'

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Speed of the transitions

Great package! Is possible to override the transition speed? Thanks in advance.

[Question] Does this work with Next.js

I can see from the examples that you import React Router. Does this work with Next.js?

Support for React 17

React 17 causes this warning:

findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference

Disabling strict mode doesn't fix the issue.

Add Gatsby.js example

Add Type Declarations

slider enterAnimation: "moveFromLeft", exitAnimation: "moveToRight", not working in MacOs safari latest version

./node_modules/@steveeeie/react-page-transition/dist/index.esm.js Module not found: Can't resolve 'styled-components'

Have this error when trying to render

Components don't appear to render when using the package

I want to use it but can't understand how. So please if someone help me. I have a running site on react with react router, now I want to add some page transition from your library.

Does this doesn't work with latest version of react or react-router-dom ?

Does this doesn't work with latest version of react or react-router-dom after doing this:

const AnimatedRoutes = () => {
  const location = useLocation();
  return (
    <PageTransition
      preset="moveToLeftFromRight"
      transitionKey={location.pathname}
    >
      <Routes location={location} key={location.pathname}>
        <Route exact path="/" element={<Home />} />
        <Route exact path="/about" element={<About />} />
        <Route exact path="/projects" element={<Projects />} />
        <Route exact path="/blogs" element={<Blog />} />
        <Route exact path="/contact" element={<Connect />} />
      </Routes>
    </PageTransition>
  );
};

it doesn't render anything?

Module not found: Can't resolve 'react-transition-group' in '*\@steveeeie\react-page-transition\dist'

Hey there,

You package seams very cool and easy to use! :)
I try to implement it in my project, but first error that I got, was that it's not types, that it doesn't have @types/@steveeie/react-page-transition module. I resolved it by making index.d.ts file and declaring the module inside.
It worked well, but on the other hand, I got this error too:
Module not found: Can't resolve 'react-transition-group' in '*\@steveeeie\react-page-transition\dist'

Is there any solution, please ? :)

Thanks in advance !

Does this work with Gastby?

Hi, I have a project which is built upon Gatsby.
I would love to use this package/module in the project for better UI UX.

Could you please tell me, a way to integrate it into the project?

Quick response is really appreciated.