Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jcoreio/react-router-transition-switch
a variant of <Switch> that's much easier to use with transition components
https://github.com/jcoreio/react-router-transition-switch
react-router transitions
Last synced: 13 days ago
JSON representation
a variant of <Switch> that's much easier to use with transition components
- Host: GitHub
- URL: https://github.com/jcoreio/react-router-transition-switch
- Owner: jcoreio
- License: mit
- Created: 2017-09-10T19:37:18.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-11-14T01:42:27.000Z (about 1 year ago)
- Last Synced: 2024-04-14T22:48:02.082Z (7 months ago)
- Topics: react-router, transitions
- Language: JavaScript
- Homepage:
- Size: 1.3 MB
- Stars: 12
- Watchers: 3
- Forks: 0
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# react-router-transition-switch
[](https://circleci.com/gh/jcoreio/react-router-transition-switch)
[](https://codecov.io/gh/jcoreio/react-router-transition-switch)
[](https://github.com/semantic-release/semantic-release)
[](http://commitizen.github.io/cz-cli/)
[](https://badge.fury.io/js/react-router-transition-switch)
This is a variant of `` that's much easier to use with transition components and solves some problems.
The current recommended transition approach for `react-router` is
```js
import { Route, Switch } from 'react-router-dom'
import Fader from 'react-fader'
const MyRoute = () => (
(
)}
/>
)
```
This has several problems:
1. All ``es transition on every `location` change, even if:
- only the last part of the URL changed and you only want the innermost nested `` to transition
- you have the same component for two different paths and don't want to transition that component
- you don't want to transition in some case for any other reason
2. You have to pass a `location` to the `` for it to work
`react-router-transition-switch` simplifies the above example to
```js
import { Route } from 'react-router-dom'
import Switch from 'react-router-transition-switch'
import Fader from 'react-fader'
const MyRoute = () => (
)
```
## Differences from `react-router`'s ``:
1. You can pass it a `component` or `render` prop. It will use them to wrap the matched `` if given
2. By default it clones the matched `` with `key={match.url}` unless you gave the `` a key yourself.
This way the `Fader` will only perform a transition when:
- if you provide `key`s yourself, the matched `` has a different `key` than the last
- otherwise, the _matched portion_ of the `location` is different from the last`
3. You can pass it a `createKey` prop, which is a function taking the `(route, match)`
and returning the key to use.
## `component` example
```js
import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import Fader from 'react-fader'
import Switch from 'react-router-transition-switch'
// ...
const MyRoute = () => (
)
```
For the location `/users/andy/profile`, the `` will render:
```js
```
Notice that it makes `match.url` the `key` of the matched ``, so that `` (or whatever transition component
you use) knows to perform a transition. If you provide custom `key`s on the ``s you pass to ``, it won't
overwrite them.
## `render` example
As with ``, you may pass a `render` function instead of a `component`:
```js
(
{children}
)}
>
...
```
## Preventing transitions in certain cases
If you want to prevent transitions between certain ``s, give them the same `key`. This will not cause problems
because `` only renders one of the child ``s it was passed, so there will never be duplicate keys during
React's reconciliation step.
```js
```
## Forcing transitions in certain cases
If you have to pass in an array of ``s, they will already have
keys, hence changes between subroutes will not transition since
`react-router-transition-switch` does not override existing keys with the
`match.url`.
In this case, you can use the `createKey` prop to force a unique key for
every `match`:
```js
match.url}>
{routes}
```