npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-router-3-drilldown

v3.0.1

Published

provides drilldown-style horizontal slide transitions between index and child routes

Downloads

17

Readme

react-router-3-drilldown

Build Status Coverage Status semantic-release Commitizen friendly

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.

Live Demo

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.