React-spring: [Request] Add integration example with Reach Router

[Oba-One]

Hi! @drcmda I was wondering if you have examples with Reach Router. Here's what I have so far, appreciate the help!

import React, { useState } from 'react';
import { Router, Location } from '@reach/router';
import { useTransition, animated } from 'react-spring';
import { Container } from '../global';
import styled from 'styled-components';

const AnimatedContainer = styled(animated(Container))``;

const AnimatedRouter = ({ children }) => {
    const [index, set] = useState(0);
    const transitions = useTransition(index, p => p, {
        from: { opacity: 0, transform: 'translate3d(100%,0,0)' },
        enter: { opacity: 1, transform: 'translate3d(0%,0,0)' },
        leave: { opacity: 0, transform: 'translate3d(-50%,0,0)' },
    });

    return (
        <Location>
            {({ location }) => (
                <AnimatedContainer key={location.key}>
                    <Router location={location}>{children}</Router>
                </AnimatedContainer>
            )}
        </Location>
    );
};

export default AnimatedRouter;

[Sampite]

Hey @Oba-One !
I also use react-spring and react-router together, there is a nice example that I used as a base and tailored for my needs at https://www.react-spring.io/docs/hooks/use-transition Demos section at the bottom.
It is currently referring to this sandbox

Hope it helps.

[Oba-One]

@Sampite I' using reach router not react router. Do you know any examples for reach?

[th3oxen]

@Oba-One here's a sandbox using reach router. However there's few things that make the transition not working as expected:

• Using this transition:

const transition = useTransition(route, r => r.pathname, {
    from: { opacity: 0, transform: "translateX(100%)" },
    enter: { opacity: 1, transform: "translateX(0)" },
    leave: { opacity: 0, transform: "translateX(-50%)" },
    unique: true,
    reset: true
});

doesn't animate correctly in chrome, but lowering the from to something like translateX(90%) works.

• Despite what's being said in the reach router documentation about animations, passing the location received from <Location> to the <Router>, causes the new location to be rendered immediately. I used local state even though I think that by doing so, a render pass is wasted returning null.

if (route.pathname !== location.pathname) {
    setRoute(location); //Cause a re-render with the new location as state
    return null;
}

P.S. Those issues are not present if using react-router-dom.

Edit:
By reading react router documentation I found out that

The useLocation hook returns the location object that represents the current URL. You can think about it like a useState that returns a new location whenever the URL changes.

So I guess that what I am doing with setRoute mimick what they're doing with useLocation

Also is worth noticing that in react router, if you put anything in between the <Switch> and its <Route>s, it will render the current location immediately, just like reach router.

<Switch location={location}>
    <div> // This won't work
        <Route path="/" exact component={ComponentA} />
        <Route path="/b" component={ComponentB} />
    </div>
</Switch>