react-router-3-drilldown
v3.0.1
Published
provides drilldown-style horizontal slide transitions between index and child routes
Downloads
17
Maintainers
Readme
react-router-3-drilldown
This is a simple component that provides drilldown-style horizontal slide transitions between index and child routes.
It is based upon react-view-slider
.
This repo is the continuation of updates for react-router
versions 2 and 3. For react-router
version 4, see the main project.
Usage
npm install --save react-router-3-drilldown react-view-slider
import React from 'react'
import {render} from 'react-dom'
import {Router, Route, IndexRoute, Link, browserHistory} from 'react-router'
import Drilldown from 'react-router-3-drilldown'
const Home = () => (
<div>
<h1>Home</h1>
<p><Link to="/users">Users</Link></p>
<p><Link to="/users/andy">Andy</Link></p>
</div>
)
const Users = () => (
<div>
<h1>Users</h1>
<Link to="/users/andy">Andy</Link>
</div>
)
const Andy = () => <h1>Andy</h1>
render(
<Router history={browserHistory}>
<Route path="/" component={Drilldown}>
<IndexRoute component={Home} />
<Route path="users" component={Drilldown}>
<IndexRoute component={Users} />
<Route path="andy" component={Andy} />
</Route>
</Route>
</Router>,
document.getElementById('root')
)
Note how the /
and users
routes both have component={Drilldown}
. Drilldown
only animates transitions at one
level, and only when navigating from the index route to a child route or vice versa, so if you want more than two levels
in your drilldown UI you must use a Drilldown
on each level.
withTransitionContext
You can use this with my react-transition-context package to easily focus elements when a drilldown route has fully entered.
npm install --save react-router-3-drilldown react-view-slider react-transition-context
import React from 'react'
import {render} from 'react-dom'
import {Router, Route, IndexRoute, Link, browserHistory} from 'react-router'
import Drilldown from 'react-router-3-drilldown/lib/withTransitionContext'
import {TransitionListener} from 'react-transition-context'
const Home = () => (
<div>
<h1>Home</h1>
<p><Link to="/users">Users</Link></p>
<p><Link to="/users/andy">Andy</Link></p>
</div>
)
const Users = () => (
<div>
<h1>Users</h1>
<Link to="/users/andy">Andy</Link>
</div>
)
class Andy extends React.Component {
render() {
return (
<div>
<h1>Andy</h1>
<input ref={c => this.email = c} placeholder="email" />
<TransitionListener didComeIn={() => this.email.focus()} />
</div>
)
}
}
render(
<Router history={browserHistory}>
<Route path="/" component={Drilldown}>
<IndexRoute component={Home} />
<Route path="users" component={Drilldown}>
<IndexRoute component={Users} />
<Route path="andy" component={Andy} />
</Route>
</Route>
</Router>,
document.getElementById('root')
)
Props that should be injected by react-router
route
routes
children
Props that are passed along to react-view-slider
animateHeight: boolean
(default: true
)
If truthy, ViewSlider
will animate its height to match the height of the page at activePage
.
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.