Cannot pass transition state as argument to children

[pmcalmeida]

Hello,
I am converting my css to styled components, so this library is a great solution when using the CSSTransition component with classnames.
There is a issue however when passing the call with the state as an argument to child of the transition component, as the function is not run.

For example:
<Fade unmountOnExit in={show} timeout={1000}> {(state) => ( <div className='greeting'>{state} Hello world</div> )} </Fade>

This should work the same way as it was intended by CSSTransition:
https://codesandbox.io/s/30n91w0omq

From taking a look at the source code, I believe the state is not passed because you would need to implement the call that passes the state before injecting the children.
Something like this would make the state available as a prop to the children components:

return ( <CSSTransition {...transition} {...props} {...(this.constructor.attrs || {})} {...(Target.attrs || {})} classNames={transitionClassNames}> {(state) => ( <Target transitionClassNames={transitionClassNames} {...props, state } /> )} </CSSTransition>

I haven't tested it, but if you agree with this solution, let me know and I'll test it and submit a PR :)

[gabiseabra]

You're right, it should act as CSSTransition.
I'm open to PRs, although AnimatedComponent should handle callbacks appropriately,
instead of just passing state as props.

[pmcalmeida]

That would be the best solution, so it wouldn't override the state prop if it was already declared in the parent