No way to use wrapperComponent: false with AnimatedSwitch

[jvgomg]

I have a use case where I need fine control over styles – specifically I need to add more styles to the element with the tweening styles. { wrapperComponent: false } seemed like the perfect option as it uses cloneElement and injects the styles.

However it turns out there is noway to consume the injected style prop (at least with AnimatedSwitch) – cloned element is actually an internal provided Switch component.

Is there something I am missing?

I came up with a work around I thought I would share using recompose and React context.

const WithStyleContext = withContext({ style: PropTypes.object }, ({ style }) => ({ style }))(({ children }) => children)

const StyleWrapper = getContext({ style: PropTypes.object })('div')

<AnimatedSwitch
  wrapperComponent={WithStyleContext}
  children={[
    <Route 
      children={() =>
        <StyleWrapper children="Hello world!" />
      }
    />
  ]}
/>

Is there a way to provide the style prop without needing to use context?

Thanks for the awesome library! :)

[Jeffwhen]

I think I figured it out. In RouteTransition, props is cloned into component, which is wrapped by a Route. The Route class does not pass props down.

[jvgomg]

This appears to be by design https://github.com/ReactTraining/react-router/issues/4627

I think it would make sense to export an AnimatedRoute component with this lib which provides this enhancement to React Router’s Route.

[Jeffwhen]

I replaced that Route element with this:

const TransRoute = ({component, style, ...props}) => (
  <Route {...props} render={props => React.cloneElement(component, {style, ...props})} />
);

And it works.

[jvgomg]

Awesome! I’ll give it a go

On Fri, 24 Nov 2017 at 15:03, Jeff Wen notifications@github.com wrote:

I replaced that Route element with this:

const TransRoute = ({component, style, ...props}) => ( <Route {...props} render={props => component({style, ...props})} /> );

And it works.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/maisano/react-router-transition/issues/83#issuecomment-346847433, or mute the thread https://github.com/notifications/unsubscribe-auth/AAZ9LVck55DZg2sEAUzt26FpgGCMWTMmks5s5trLgaJpZM4QmDuD .