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
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>
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
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> Component { return <div> <h1>Andy</h1> <input ref= thisemail = c placeholder="email" /> <TransitionListener didComeIn= thisemail /> </div> }
react-router
Props that should be injected by route
routes
children
react-view-slider
Props that are passed along to 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.