@dancotton/segue-react-router

Segue for React Router (v6.7+)

Segue makes shared element transitions declarative and easy for web developers.

It's a wrapper of the amazing GSAP flip plugin.

Quickstart

With React-Router

Currently we only have bindings for the (as of writing) latest versions of React Router (v6.7.0 and above!)

Install dependencies via your package manager of choice.

npm install --save @dancotton/segue-react-router @dancotton/segue

Ensure you're using the 'data routers' as described in the react-router docs

Add SegueReactRouter to your JSX tree anywhere under the RouterProvider. For example:

import SegueReactRouter from '@dancotton/segue-react-router';

<Route path="/" element={<SegueReactRouter />}>
  <Route path="/" element={<Home />} />
  <Route path="/item/:id" element={<Detail />} />
</Route>

Finally - label any shared elements using the 'data-flip-id' attribute - e.g.

<div data-flip-id={`item-${item.id}`} />

This ID needs to be consistent across any pair of shared elements!

And you're done - wasn't that easy!

There's a full example in our repo