Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jcoreio/react-router-drilldown
provides drilldown-style horizontal slide transitions between index and child routes
https://github.com/jcoreio/react-router-drilldown
animation drilldown react react-router route transition
Last synced: 18 days ago
JSON representation
provides drilldown-style horizontal slide transitions between index and child routes
- Host: GitHub
- URL: https://github.com/jcoreio/react-router-drilldown
- Owner: jcoreio
- License: mit
- Created: 2016-12-27T18:55:53.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-04-10T02:40:39.000Z (9 months ago)
- Last Synced: 2024-04-14T06:44:57.368Z (8 months ago)
- Topics: animation, drilldown, react, react-router, route, transition
- Language: TypeScript
- Homepage: https://jcoreio.github.io/react-router-drilldown/
- Size: 4.05 MB
- Stars: 12
- Watchers: 5
- Forks: 1
- Open Issues: 34
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# react-router-drilldown
[](https://circleci.com/gh/jcoreio/react-router-drilldown)
[](https://codecov.io/gh/jcoreio/react-router-drilldown)
[](https://github.com/semantic-release/semantic-release)
[](http://commitizen.github.io/cz-cli/)
[](https://badge.fury.io/js/react-router-drilldown)
This is a simple component that provides drilldown-style horizontal slide transitions between index and child routes.
It is based upon the `` component from `react-router` v4 and uses `react-view-slider` internally.
For `react-router` v2 or v3, see the [legacy project](https://github.com/jcoreio/react-router-3-drilldown).
[Live Demo](http://jcoreio.github.io/react-router-drilldown/)
## Usage
```
npm install --save react-router react-router-dom react-router-drilldown
```
Create a `` element with child ``s exactly like you would for a ``.
By default the first child `` is at the left, and subsequent child routes will slide in from the right.
However, you also customize the order by giving an integer `key` to each child route.
```js
import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import Drilldown from 'react-router-drilldown'
const Home = () => (
Home
Users
Andy
)
const Users = ({ match }) => (
Users
Andy
)
const Andy = () =>
Andy
render(
,
document.getElementById('root')
)
```
Note: if you transition directly from `/` to `/users/andy` before ever visiting `/users`, the `/users` view will not
show in the middle of the animated transition. However, once you have visited `/users`, it will show between the other
two views when transitioning between them.
## Drilldowns can be nested
Instead of the flat route configuration shown above, you also use a separate drilldown at each level:
```js
const UsersRoute = ({ match }) => (
)
render(
,
document.getElementById('root')
)
```
Unlike the flat example above, you will not see the `/users` view fly by in the middle when transitioning directly
from `/` to `/users/andy`.
## Props
### `animateHeight: boolean` (default: `true`)
If truthy, will animate its height to match the height of the page at `activePage`.
### `keepViewsMounted: boolean` (default: `false`)
If truthy, will keep all routes that have rendered before mounted.
### `keepPrecedingViewsMounted: boolean` (default: `false`)
If truthy, will keep routes preceding the active route mounted (but not routes following the active route).
The order is determined by the integer `key` properties on your ``s.
### `transitionDuration: number` (default: `500`)
The duration of the transition between pages.
### `transitionTimingFunction: string` (default: `'ease'`)
The timing function for the transition between pages.
### `prefixer: Prefixer`
If given, overrides the `inline-style-prefixer` used to autoprefix inline styles.
### `fillParent: boolean` (default: `false`)
If truthy, `Drilldown` will use absolute positioning on itself and its pages to fill its parent element.
### `className: string`
Any extra class names to add to the root element.
### `style: Object`
Extra inline styles to add to the root element.
### `viewportClassName: string`
Any extra class names to add to the inner "viewport" element.
### `viewportStyle: Object`
Extra inline styles to add to the inner "viewport" element.
### `viewStyle: Object`
Extra inline styles to add to the view wrapper elements.
##### `innerViewWrapperStyle: Object`
Extra inline styles to add to the inner div between the `viewStyle` div and your
view content element. (The inner div was added to ensure perfect height
animation.)
### `location: Location` (default: accessed from `withRouter`)
If given, this location is used instead of the one from `withRouter`.