react-router-location-aware-transitions
Power contextual location aware react router transitions
Last updated 3 years ago by luigiplr .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-router-location-aware-transitions 
SYNC missed versions from official npm registry.

react-router-location-aware-transitions

Power contextual location aware react router transitions

Getting started

npm install react-router-location-aware-transitions --save

Example

Decorating react router Route's


import React from 'react'
import { Route } from 'react-router-dom'
import LocationAwareTransitions from 'react-router-location-aware-transitions'
import styles from './styles.scss'

export default class App extends React.Component {
    render() {
        return (
            <div>
                <LocationAwareTransitions.Conductor onLocationWillChange={onLocationWillChange}>
                    <TransitionRoute component={require('./components/a')} path='/a' />
                    <TransitionRoute component={require('./components/b')} path='/b' />
                    <TransitionRoute component={require('./components/c')} path='/c' />
                </LocationAwareTransitions.Conductor>
            </div>
        )
    }
}

function TransitionRoute({ component, path, ...props }) {
    return (
        <Route path={path} {...props} children={childProps =>
            <LocationAwareTransitions.Child {...childProps} path={path} className={styles.transitionChild}>
                {component}
            </LocationAwareTransitions.Child>
        } />
    )
}

TransitionRoute.propTypes = {
    component: PropTypes.any.isRequired,
    path: PropTypes.string
}

function onLocationWillChange(nextProps, currentProps) {
    // optional logic here
    // TODO: add real use-case example for this.
    return true
}

Current Tags

  • 1.0.4                                ...           latest (3 years ago)

5 Versions

  • 1.0.4                                ...           3 years ago
  • 1.0.3                                ...           3 years ago
  • 1.0.2                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (6)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |