React-transition-group: Docs inaccurate

[Noitidart]

Hi there,

I clicked the docs for CSSTransition and am seeing props like in and stuff not documented - http://reactcommunity.org/react-transition-group/css-transition/

I also checked the walkthrough for migration from v1, and it seems that is outdated/wrong - https://github.com/reactjs/react-transition-group/blob/master/Migration.md - please correct, or remove from readme.

[Noitidart]

The CodeBox apparently shows CSSTransition takes a child as a function or something.

I can't figure out how to use this. Please help.

[jquense]

As the docs say CssTransition inherits all of the props from Transition, one should read the API for both components

[Noitidart]

Oh thank you @jquense this is very nice. May you please show example of <Transition> without a functional child?

[silvenon]

While Transition supports a React element as a child, status is only available with a functional child.

// state available :)
<Transition in={inProp} timeout={400}>
  {state => <MyComponent transitionState={state} />}
</Transition>

// no state available :(
<Transition in={inProp} timeout={400}>
  <MyComponent />
</Transition>

[Noitidart]

Thanks so much for sharing @silvenon !

So with react element,it is not possible to do any animation?

[silvenon]

Not with Transition, it's probably supported only because CSSTransition needs it, but it's not documented on purpose. You should use CSSTransition instead, then you can use classes to apply transitions.

[Noitidart]

Ohhh I got it now. Thank you so much @silvenon !! I was trying to use react element instead of function child all this time, so if I want to do this then I have to use CSSTransition. It all makes sense now. thanks!