Slide Page CSS Transition on React with React Router

Getting Started

One of the awesome things you can add to your application, for example, your Portfolio as a developer and software engineer so you want to make it look absolutely stunning by adding smooth animations and uniquely different design alongside that making the transition between your pages with animation can grab a lot of intention to you and your app plus it will give the user a much better experience compared to a regular application.

React Router uses a declarative page navigation which means that all the transition among your web pages are done on the client side, the server doesn’t know or care about those navigations so in this case it can give you a lot of benefits adding to your apps for having a nice and elegant transition (Animation) when navigating between pages.

We will be using react-transition-group which allows you to add animations before and after a react element gets mounted or unmounted from the DOM it does handle all the logic of keeping track if the component behind the scenes all you have to do is to tell which component is going to be animated and what type of animation to be applied.

you can use regular react transition group animation or much better you can rely on a CSS Animation since you may already be familiar with plus it is super easy. We will be creating a CSS Page Slide Transition so one page slides on top of the other when navigating through pages.

So, first, install react-transition-group and install node-sass for using SASS with your react-create-app project.

npm install react-transition-group --save 

And node-sass

npm install node-sass --save-dev 

We will not cover how to set up or use React router so I assume you already have a working application with a multipage setup with react-router-dom.

You can get the Full Working Source Code on Github.

Use React Transition Group

We need to setup react transition group to work with react router so when it detects a location change (basically navigating to another page) it applies the specified animation.

Here is how my simple app looks like with react router only.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    const { location } = this.props;

    return (
      <div className="App">
        <Switch location={location}>
          <Route path="/" exact component={HomePage} />
          <Route path="/about" exact component={AboutPage} />
        </Switch>
      </div>
    );
  }
}

Basically, there are two pages the Home page and About page.

Let’s wrap it up with React Transition Group component.

 render() {
    const { location } = this.props;
  /*Used to track if the page path did change so when can re-render the routes to apply animation */
    const currentKey = location.pathname.split("/")[1] || "/";
    //Specify the duration of the animation (on enter and on exit)
    const timeout = { enter: 800, exit: 400 };

    return (
      <TransitionGroup component="div" className="App">
        <CSSTransition
          key={currentKey}
          timeout={timeout}
          classNames="pageSlider"
          mountOnEnter={false}
          unmountOnExit={true}
        >
          <div>
            <Switch location={location}>
              <Route path="/" exact component={HomePage} />
              <Route path="/about" exact component={AboutPage} />
            </Switch>
          </div>
        </CSSTransition>
      </TransitionGroup>
    );
  }

The CSSTransition component will apply the specified CSS transition class through className prop plus it also takes a timeout object to know the duration of the transition on entering and on exit.

CurrentKey is used to keep track if the current page path has been changed so we can re-render the CSStransition group through the React key prop which it detects if the key value changes it re-renders current component and of course that will allow us to apply the transition animation whenever we navigate to a different page on the routes list.

Although, this is a slide animation but it is not smart enough to know either to apply transition from left to right or vice versa from right to left which is linked to the current page, for example if you’re at the Home Page and you navigated to about page the page should apply transition from right to left since the Home page in this case is concerned as a base 0 path, in the other hand if you suddenly decided to move back to home page then you should expect the transition direction to be from left to right to make it feel a bit smarter other than always applying the same animation direction for whatever page path throughout your app.

So let’s add a method for calculating the current page depth, depth is the number of paths exists in a URL so, for example, the root path “/” has a depth of 0 since there is an empty path, where for the “/about” page route it has a depth of 1.

getPathDepth(location) {
  let pathArr = location.pathname.split("/");
  pathArr = pathArr.filter(n => n !== "");
  return pathArr.length;
}

We want to have a prevDepth and then compare it with current depth to decide the transition’s direction.

constructor(props) {
  super(props);
  this.state = {
    //Get initial depth of current page 
    prevDepth: this.getPathDepth(this.props.location)
  };
}

componentWillReceiveProps() {
  //When props are updated, update the current path 
  //props supplies us with the location object which has a router location info
  this.setState({ prevDepth: this.getPathDepth(this.props.location) });
}

CSS Slide Transition

Let’s add the CSS Transition which is going to be responsible for animating and applying the smooth slide animation between pages.

You can create a new folder name it pageTransitions and put all of your transitions in there, create a new slideTransition.scss file (you can use regular CSS) but it is easier and faster to do it with SASS.

/* slideTransition.scss */

//old page exiting, hides it underneath (bottom) 
.pageSlider-exit > .page {
  z-index: 1;
}
//new page entering, show it on top
.pageSlider-enter > .page {
  z-index: 10;
}
//LEFT transition transform 100% to the right
.pageSlider-enter.left > .page {
  transform: translate3d(100%, 0, 0);
}
//RIGHT transition transform -100% to the left
.pageSlider-enter.right > .page {
  transform: translate3d(-100%, 0, 0);
}
//old exit left direction
.pageSlider-exit.left > .page {
  transform: translate3d(-100%, 0, 0);
}
//old exit right direction 
.pageSlider-exit.right > .page {
  transform: translate3d(100%, 0, 0);
}
//Enter is active (Page has finished transitioning) make it settle down 
.pageSlider-enter.pageSlider-enter-active > .page {
  transform: translate3d(0, 0, 0);
  //Apply all transitions 
  transition: all 800ms ease-in-out;
}

Regarding this pattern the CSSTransition works and read your CSS supplied transition class, you can easily create your own custom transitions and animation like fading or dissolve.

If you can notice we’re adding a .page class to get the CSS code to be applied on, so now for every page we want to apply the animation to we need to add .page class to its classNames list.

Make it Smarter

On real time we need to decide either to move from left to right or from right to left by comparing the previous page depth which is in the state with the current depth.

<div
  className={
    this.getPathDepth(location) - this.state.prevDepth >= 0
      ? "left"
      : "right"
  }
>
  <Switch location={location}>
    <Route path="/" exact component={HomePage} />
    <Route path="/about" exact component={AboutPage} />
  </Switch>
</div>

So we compare both depths and decide to use left if current depth is greater than the previous one which means we are not in the home page so we will be applying transition from left to right otherwise apply from right to left.

The left and right classes are the defined classes names in the page slider transition class.

Finally, add the page className to the pages you which to apply the transition to when navigating to or from other pages.


export default class HomePage extends React.Component {
  render() {
    return (
      <div className="page-container page">
         Page Content 
      </div>
   );
  }
}

Try to run your application and navigate about pages you should see a really smooth and nice sliding left/right animation between your pages.

#react #css #html #javascript #web-development

What is GEEK

Buddha Community

Slide Page CSS Transition on React with React Router
Autumn  Blick

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

  • Performance: It delivers optimal performance.
  • Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
  • UI design: React Native enables you to design simple and responsive UI for your mobile app.
  • 3rd party plugins: This framework supports 3rd party plugins.
  • Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

  • Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
  • Near-native user experience: React Native provides several native components, and these are platform agnostic.
  • The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Slide Page CSS Transition on React with React Router

Getting Started

One of the awesome things you can add to your application, for example, your Portfolio as a developer and software engineer so you want to make it look absolutely stunning by adding smooth animations and uniquely different design alongside that making the transition between your pages with animation can grab a lot of intention to you and your app plus it will give the user a much better experience compared to a regular application.

React Router uses a declarative page navigation which means that all the transition among your web pages are done on the client side, the server doesn’t know or care about those navigations so in this case it can give you a lot of benefits adding to your apps for having a nice and elegant transition (Animation) when navigating between pages.

We will be using react-transition-group which allows you to add animations before and after a react element gets mounted or unmounted from the DOM it does handle all the logic of keeping track if the component behind the scenes all you have to do is to tell which component is going to be animated and what type of animation to be applied.

you can use regular react transition group animation or much better you can rely on a CSS Animation since you may already be familiar with plus it is super easy. We will be creating a CSS Page Slide Transition so one page slides on top of the other when navigating through pages.

So, first, install react-transition-group and install node-sass for using SASS with your react-create-app project.

npm install react-transition-group --save 

And node-sass

npm install node-sass --save-dev 

We will not cover how to set up or use React router so I assume you already have a working application with a multipage setup with react-router-dom.

You can get the Full Working Source Code on Github.

Use React Transition Group

We need to setup react transition group to work with react router so when it detects a location change (basically navigating to another page) it applies the specified animation.

Here is how my simple app looks like with react router only.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    const { location } = this.props;

    return (
      <div className="App">
        <Switch location={location}>
          <Route path="/" exact component={HomePage} />
          <Route path="/about" exact component={AboutPage} />
        </Switch>
      </div>
    );
  }
}

Basically, there are two pages the Home page and About page.

Let’s wrap it up with React Transition Group component.

 render() {
    const { location } = this.props;
  /*Used to track if the page path did change so when can re-render the routes to apply animation */
    const currentKey = location.pathname.split("/")[1] || "/";
    //Specify the duration of the animation (on enter and on exit)
    const timeout = { enter: 800, exit: 400 };

    return (
      <TransitionGroup component="div" className="App">
        <CSSTransition
          key={currentKey}
          timeout={timeout}
          classNames="pageSlider"
          mountOnEnter={false}
          unmountOnExit={true}
        >
          <div>
            <Switch location={location}>
              <Route path="/" exact component={HomePage} />
              <Route path="/about" exact component={AboutPage} />
            </Switch>
          </div>
        </CSSTransition>
      </TransitionGroup>
    );
  }

The CSSTransition component will apply the specified CSS transition class through className prop plus it also takes a timeout object to know the duration of the transition on entering and on exit.

CurrentKey is used to keep track if the current page path has been changed so we can re-render the CSStransition group through the React key prop which it detects if the key value changes it re-renders current component and of course that will allow us to apply the transition animation whenever we navigate to a different page on the routes list.

Although, this is a slide animation but it is not smart enough to know either to apply transition from left to right or vice versa from right to left which is linked to the current page, for example if you’re at the Home Page and you navigated to about page the page should apply transition from right to left since the Home page in this case is concerned as a base 0 path, in the other hand if you suddenly decided to move back to home page then you should expect the transition direction to be from left to right to make it feel a bit smarter other than always applying the same animation direction for whatever page path throughout your app.

So let’s add a method for calculating the current page depth, depth is the number of paths exists in a URL so, for example, the root path “/” has a depth of 0 since there is an empty path, where for the “/about” page route it has a depth of 1.

getPathDepth(location) {
  let pathArr = location.pathname.split("/");
  pathArr = pathArr.filter(n => n !== "");
  return pathArr.length;
}

We want to have a prevDepth and then compare it with current depth to decide the transition’s direction.

constructor(props) {
  super(props);
  this.state = {
    //Get initial depth of current page 
    prevDepth: this.getPathDepth(this.props.location)
  };
}

componentWillReceiveProps() {
  //When props are updated, update the current path 
  //props supplies us with the location object which has a router location info
  this.setState({ prevDepth: this.getPathDepth(this.props.location) });
}

CSS Slide Transition

Let’s add the CSS Transition which is going to be responsible for animating and applying the smooth slide animation between pages.

You can create a new folder name it pageTransitions and put all of your transitions in there, create a new slideTransition.scss file (you can use regular CSS) but it is easier and faster to do it with SASS.

/* slideTransition.scss */

//old page exiting, hides it underneath (bottom) 
.pageSlider-exit > .page {
  z-index: 1;
}
//new page entering, show it on top
.pageSlider-enter > .page {
  z-index: 10;
}
//LEFT transition transform 100% to the right
.pageSlider-enter.left > .page {
  transform: translate3d(100%, 0, 0);
}
//RIGHT transition transform -100% to the left
.pageSlider-enter.right > .page {
  transform: translate3d(-100%, 0, 0);
}
//old exit left direction
.pageSlider-exit.left > .page {
  transform: translate3d(-100%, 0, 0);
}
//old exit right direction 
.pageSlider-exit.right > .page {
  transform: translate3d(100%, 0, 0);
}
//Enter is active (Page has finished transitioning) make it settle down 
.pageSlider-enter.pageSlider-enter-active > .page {
  transform: translate3d(0, 0, 0);
  //Apply all transitions 
  transition: all 800ms ease-in-out;
}

Regarding this pattern the CSSTransition works and read your CSS supplied transition class, you can easily create your own custom transitions and animation like fading or dissolve.

If you can notice we’re adding a .page class to get the CSS code to be applied on, so now for every page we want to apply the animation to we need to add .page class to its classNames list.

Make it Smarter

On real time we need to decide either to move from left to right or from right to left by comparing the previous page depth which is in the state with the current depth.

<div
  className={
    this.getPathDepth(location) - this.state.prevDepth >= 0
      ? "left"
      : "right"
  }
>
  <Switch location={location}>
    <Route path="/" exact component={HomePage} />
    <Route path="/about" exact component={AboutPage} />
  </Switch>
</div>

So we compare both depths and decide to use left if current depth is greater than the previous one which means we are not in the home page so we will be applying transition from left to right otherwise apply from right to left.

The left and right classes are the defined classes names in the page slider transition class.

Finally, add the page className to the pages you which to apply the transition to when navigating to or from other pages.


export default class HomePage extends React.Component {
  render() {
    return (
      <div className="page-container page">
         Page Content 
      </div>
   );
  }
}

Try to run your application and navigate about pages you should see a really smooth and nice sliding left/right animation between your pages.

#react #css #html #javascript #web-development

Carroll  Klein

Carroll Klein

1590546900

How React Hooks can replace React Router

Looking to learn more about hookrouter and how it works? Follow along with this tutorial to learn more.

#react #react-native #react hooks #react router

Raleigh  Hayes

Raleigh Hayes

1626959340

Building a Dashboard with Cube CSS and React

Hi! Super excited for this video. Cube CSS has completely changed the way I look at CSS. In this video we are building a dashboard using Cube CSS and React. I hope you enjoy.

Timestamps:
0:00 - Intro
2:50 - The App
4:27 - Global CSS
5:53 - Theme Utilities
8:45 - Composition Style Utilities
13:36 - Shared Blocks/Exception
16:26 - Custom Blocks

Useful links:
Github: https://github.com/redhwannacef/youtube-tutorials/tree/master/cube-css-react

#css #react #cube css #cube css and react

How to Setup React Router v5 using React Hooks

React Router library makes the navigation experience of the client in your web page application more joyful, but how?!

React Router, indeed, prevent the page from being refreshed. Thus the blank page resulted from a refreshed page is not displayed while the user is navigating and routing through your web. This tool enables you to manipulate your web application routes through provided routing components and dynamic routing while the app is rendering.

How to start:
You need a React web app, to get started. If you don’t have, install create-react-app and launch a new project using it. Then you need to install react-router-dom, applying either npm or yarn.

npm install --save react-router-dom
yarn add react-router-dom

Now all the required components are installed. We are enabled to add any component to the App.js inside the router to build our unique web page. All these elements are the router children to which we specify their path. For instance, I add the components of Homepage, About, and Products inside the router where one can navigate through them. Also, React Router allows us to redirect our clients by a simple click on a button. To this purpose, import the Link to your component, define an onclick function for the button and redirect it to your intended path.

These are not all. There are other features in React Router. If you want to know how to install and benefit from it, join me in this YouTube video to decode the solution. I create the above-mentioned app and its components and explain all the features that we can use to improve it:

👕 T-shirts for programmers: https://bit.ly/3ir3Gci

Suscribe: https://www.youtube.com/c/ProgrammingwithMasoud/featured

#reactjs #react #react-router #web #javascript #react-router-dom