Repository files navigation

This is a simple component that provides drilldown-style horizontal slide transitions between index and child routes.It is based upon the<Switch> component fromreact-router v4 and usesreact-view-slider internally.

Forreact-router v2 or v3, see thelegacy project.

Live Demo

npm install --save react-router react-router-dom react-router-drilldown

Create a<Drilldown> element with child<Route>s exactly like you would for a<Switch>.By default the first child<Route> is at the left, and subsequent child routes will slide in from the right.However, you also customize the order by giving an integerkey to each child route.

importReactfrom'react'import{render}from'react-dom'import{BrowserRouterasRouter,Route,Link}from'react-router-dom'importDrilldownfrom'react-router-drilldown'constHome=()=>(<div><h1>Home</h1><p><Linkto="/users">Users</Link></p><p><Linkto="/users/andy">Andy</Link></p></div>)constUsers=({ match})=>(<div><h1>Users</h1><Linkto={`${match.url}/andy`}>Andy</Link></div>)constAndy=()=><h1>Andy</h1>render(<Router><Drilldown><Routeexactpath="/"component={Home}/><Routeexactpath="/users"component={Users}/><Routepath="/users/andy"component={Andy}/></Drilldown></Router>,document.getElementById('root'))

Note: if you transition directly from/ to/users/andy before ever visiting/users, the/users view will notshow in the middle of the animated transition. However, once you have visited/users, it will show between the othertwo views when transitioning between them.

Instead of the flat route configuration shown above, you also use a separate drilldown at each level:

constUsersRoute=({ match})=>(<Drilldown><Routeexactpath={match.path}component={Users}/><Routepath={`${match.url}/andy`}component={Andy}/></Drilldown>)render(<Router><Drilldown><Routeexactpath="/"component={Home}/><Routepath="/users"component={UsersRoute}/></Drilldown></Router>,document.getElementById('root'))

Unlike the flat example above, you will not see the/users view fly by in the middle when transitioning directlyfrom/ to/users/andy.

If truthy, will animate its height to match the height of the page atactivePage.

If truthy, will keep all routes that have rendered before mounted.

If truthy, will keep routes preceding the active route mounted (but not routes following the active route).The order is determined by the integerkey properties on your<Route>s.

The duration of the transition between pages.

The timing function for the transition between pages.

If given, overrides theinline-style-prefixer used to autoprefix inline styles.

If truthy,Drilldown will use absolute positioning on itself and its pages to fill its parent element.

Any extra class names to add to the root element.

Extra inline styles to add to the root element.

Any extra class names to add to the inner "viewport" element.

Extra inline styles to add to the inner "viewport" element.

Extra inline styles to add to the view wrapper elements.

Extra inline styles to add to the inner div between theviewStyle div and yourview content element. (The inner div was added to ensure perfect heightanimation.)

If given, this location is used instead of the one fromwithRouter.