match-with-transforms.js

import React from 'react'
import { Match } from 'react-router'

// example:
// <MatchWithTransforms
//     transforms={{ id: Number }}
//     pattern="/page/:id"
//     component={ViewPage} />

const MatchWithTransforms = ({ transforms, ...matchProps}) => {
    const transformParams = (props) => {
        const {...clonedParams} = props.params

        Object.keys(transforms).forEach(key => {
            if (clonedParams[key] != null) {
                const transform = transforms[key]
                clonedParams[key] = transform(clonedParams[key])
            }
        })

        return {
            ...props,
            params: clonedParams
        }
    }

    /* matchProps is a shallow clone, so it's ok to modify */
    if (matchProps.component) {
        const { component: Component } = matchProps
        matchProps.component = (props) => (
            <Component {...transformParams(props)} />
        )
    }

    if (matchProps.render) {
        const { render } = matchProps
        matchProps.render = (props) => render(transformParams(props))
    }
    if (typeof matchProps.children === 'function') {
        const { children } = matchProps
        matchProps.children = (props) => children(transformParams(props))
    }

    return <Match {...matchProps} />
}
MatchWithTransforms.propTypes = {
    transforms: React.PropTypes.objectOf(React.PropTypes.func.isRequired,).isRequired,
}

export default MatchWithTransforms