React-router-simple-transition NPM

react-router-simple-transition

Fluid full page transitions for use with react-router-dom

Install

npm i -D react-router-simple-transition

Usage

If you are upgrading from v1, please see the Migration guide

Step 1: Wrap your app with the `<TransitionProvider />`

Wrap your application with the <TransitionProvider /> to expose the transition framework functions to the rest of the app.

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import { TransitionProvider } from "react-router-simple-transition";
import { App } from "./path/to/app.jsx";

ReactDOM.render(
    <BrowserRouter basename="/main/">
        <TransitionProvider>
            <App />
        </TransitionProvider>
    </BrowserRouter>,
    document.querySelector("#root")
);

Step 2: Enclose each `<Route />` child in a `<Transition />`

Wrap each <Route /> child with the <Transition /> make the transition effect available for that route

In this example, our app has two pages; Home and Login

import { Switch, Route } from "react-router-dom";
import { Transition } from "react-router-simple-transition";
import Home from "./path/to/home.jsx";
import Login from "./path/to/login.jsx";

export const App = () => {
    // ... Rest of code

    return (
        <Switch>
            <Route exact path="/">
                <Transition>
                    <Home/>
                </Transition>
            </Route>

            <Route exact path="/login">
                <Transition>
                    <Login/>
                </Transition>
            </Route>
        </Switch>
    );
};

Step 3: Use the transition routing functions

At this point, the TransitionContext is now available to the entire child tree. This enables use the routing methods provided instead of those from react-router-dom.

The page transition effects will not work if you use react-router-dom routing methods

home.jsx

import React, { useContext } from "react";
import { TransitionContext, Link } from "react-router-simple-transition";
// The Link component replaces that of react-router-dom for declarative transition

export const Home = () => {
    // Instead of using useHistory hook, we use a redirect function available in the TransitionContext
    const { redirect } = useContext(TransitionContext);

    return (
        <div id="home">
            <Link to="/login">
                Redirect to login with transition effect
            </Link>

            <Link to="/login" dontAnimate>
                Redirect to login without transition effect
            </Link>

            <button onClick={() => redirect("/login")}">
                Redirect to login with transition effect
            </button>

            <button onClick={() => redirect("/login", true)}">
                Redirect to login without transition effect
            </button>
        </div>
    )
};

As seen above, you can still disable the transition effect by specifying the dontAnimate prop of the <Link /> or calling the redirect function with a second argument of true.

Each paged wrapped in the <Transition /> has a scale-in-fade-in entry transition effect, while the exit transition is a scale-out-and-fade-out.

Work is ongoing to provide a transition builder for you to create your own transition effects. This will be available in subsequent versions.

For optimal transitions, you must ensure that your pages have 100vw and 100vh width and height respectively. Otherwise you will notice the annoying scrollbars visible on the page during transitions.

useQueryParams

This hook parses the URL query string into an key-value object and returns the object with functions to update and remove parameters from the object which in turn modify the query string of the URL

import React, { useEffect } from "react";
import { useQueryParams } from "react-simple-hooks2";

const MyComponent = () => {
    const { qp, updateParameter, removeParameter } = useQueryParams();

    useEffect(() => {
        console.log(qp);
        // For the URL, "http://localhost:8000?key1=value1&key2=value2",
        // the queryParams object will be { key1: "value1", key2: "value2" }
    }, [qp]);

    return (
        <div>
            <button onClick={() => updateParameter({ key1: "value3" }, { dontAnimate: false, replaceUrl: true })}>
                Change value of &quot;key1&quot; to &quot;value3&quot; in the URL
            </button>

            <button onClick={() => removeParameter("key2", (dontAnimate: false), (replaceUrl: true))}>
                Remove parameter &quot;key2&quot; from the URL
            </button>
        </div>
    );
};

Using either updateParameter or removeParameter will change the current URL of the page.
If dontAnimate is true, no animation will play and the redirect will be done immediately. This is false by default.
If replaceUrl is true, the new URL will replace the current URL, not push onto it. This is false by default.