maisano / react-router-transition

painless transitions built for react-router, powered by react-motion
http://maisano.github.io/react-router-transition/
MIT License
2.59k stars 138 forks source link

wrapperComponent prop accepts PropTypes.func #98

Closed prayash closed 4 years ago

prayash commented 6 years ago

Problem:

The RouteTransition component wraps its children by default with a div. In order to give that div a custom class, we need to pass in a custom div with the desired class into the wrapperComponent prop.

The wrapperComponent prop for the RouteTransition component is used for the React.createElement call in the renderRoute method. One can pass in a 'div', but not a React Component (class or function).

Because React.createElement() supports either argument type, we should be able to pass in a stateless functional component as a wrapper component.

Solution

It should accept PropTypes.func as a component so that the user can pass in a wrapperComponent like so:

render() {
  const WrapperComponent = ({ children }) => (
    <div className="route-wrapper-inner">{children}</div>
  )

  return (    
    <AnimatedSwitch
          className="route-wrapper"
          atEnter={atEnter}
          atLeave={atLeave}
          atActive={transition.atCenter}
          mapStyles={mapStyles}
          wrapperComponent={WrapperComponent}
        >
          {children}
        </AnimatedSwitch>
    )
}

@maisano, if I could get your eyes on this when you have a chance it would be greatly appreciated!