I'm trying to create a reuseable component for <TransitionGroup>
but not sure where to place the {children}
.
import React from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
const TransitionFade = ({ children }) => {
return(
<TransitionGroup>
<CSSTransition in={true} appear={true} timeout={700} classNames="fade">
{children}
</CSSTransition>
</TransitionGroup>
);
}
export default TransitionFade;
I probably don't understand your question 100% (it could include more detail), but perhaps you were looking for something like this, i.e., use the fade effect on each child separately, not just as a whole?
import React from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
const TransitionFade = ({ children }) => {
return(
<TransitionGroup>
{ React.Children.map(children, child =>
(<CSSTransition in={true} appear={true} timeout={700} classNames="fade">
{child}
</CSSTransition>)
)
}
</TransitionGroup>
);
}
export default TransitionFade;
Seems like a neat idea, since there are many contexts in which one would like to add or remove children from a list or similar. I might start using this already.