[Request] Add integration example with Reach Router about react-spring.io

[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>

[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.

[joshuaellis]

Moving to react-spring.io where this should probably live.