Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@steveeeie/react-page-transition

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@steveeeie/react-page-transition

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

  • 1.3.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
344
decreased by-16.5%
Maintainers
1
Weekly downloads
 
Created
Source

License Version Size PRs Twitter Follow

React Page Transition

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

View Basic Demo

View Advanced Demo

View TypeScript Demo


preview
preview


Usage with react-router

1. Install Package

npm install @steveeeie/react-page-transition

or

yarn add @steveeeie/react-page-transition


2. Install Dependencies

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

or

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

PropRequiredTypeDescription
presetNoStringSets the enter and exit animations *
enterAnimationNoStringSets the enter animation *
exitAnimationNoStringSets the exit animation *
transitionKeyYesUnique IdentifierUsed internally to track which components are entering and exiting.
* View the advanced demo for the full list of presets and animations.

Keywords

FAQs

Package last updated on 08 May 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc