# react-animated-routes

> Small wrapper over the [Route](https://reactrouter.com/web/api/Route) and [CSSTransition](http://reactcommunity.org/react-transition-group/css-transition) with the ability to override CSSTransition props.

Latest version **0.1.0** (published 2021-07-27) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-animated-routes
pnpm add react-animated-routes
yarn add react-animated-routes
bun add react-animated-routes
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2021-07-27 |
| First published | 2021-07-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 10.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Maintainers | grind-t |

## Links

- npm: https://www.npmjs.com/package/react-animated-routes
- Repository: https://github.com/grind-t/react-animated-routes
- Homepage: https://github.com/grind-t/react-animated-routes#readme
- Issues: https://github.com/grind-t/react-animated-routes/issues
- npm.io page: https://npm.io/package/react-animated-routes

## Dependencies (2)

- [react-transition-group](https://npm.io/package/react-transition-group.md) ^4.4.2
- [@types/react-transition-group](https://npm.io/package/@types/react-transition-group.md) ^4.4.2

## Recent versions

- 0.1.0 (latest) — 2021-07-27
- 0.0.8 — 2021-07-18
- 0.0.7 — 2021-07-17
- 0.0.6 — 2021-07-17
- 0.0.5 — 2021-07-16
- 0.0.4 — 2021-07-16
- 0.0.3 — 2021-07-16
- 0.0.2 — 2021-07-15
- 0.0.1 — 2021-07-15

## README

# react-animated-routes

Small wrapper over the [Route](https://reactrouter.com/web/api/Route) and [CSSTransition](http://reactcommunity.org/react-transition-group/css-transition) with the ability to override CSSTransition props.

## Install

```sh
npm i react-animated-routes
# You also need to make sure you have peer dependencies installed
npm i react react-dom react-router-dom react-router-last-location
```

## Basic usage

`<AnimatedRoute />` combines `<Route />` and `<CSSTransition />` logic and props, so it's easier to use:

```jsx
// You can write
<AnimatedRoute exact path="/page" timeout={300} classNames="fade">
    <div>Page</div>
</AnimatedRoute>

// Instead of
<Route exact path="/page">
  {({ match }) => (
    <CSSTransition
      in={match != null}
      timeout={300}
      classNames="fade"
      unmountOnExit
    >
      <div>Page</div>
    </CSSTransition>
  )}
</Route>
```

## Override props

You can also override CSSTransition props with location state.

To do this, you need to declare `<LastLocationProvider />` inside `<Router />`:

```jsx
import { BrowserRouter as Router } from 'react-router-dom';
import { LastLocationProvider } from 'react-router-last-location';

const App = () => (
  <Router>
    <LastLocationProvider>...</LastLocationProvider>
  </Router>
);
```

Then you can override CSSTransition props with [history object](https://reactrouter.com/web/api/history) or [Link component](https://reactrouter.com/web/api/Link):

```jsx
// Override CSSTransition props
const transition = { timeout: 400, classNames="slide" };

// With history object
history.push('/page', { transition });

// Or Link component
<Link
  to={{
    pathname: '/page',
    state: { transition },
  }}
/>
```

## Demo

[See it in action](https://codesandbox.io/s/ne8bm).

---
_Source: https://npm.io/package/react-animated-routes · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._