react-transition-group icon indicating copy to clipboard operation
react-transition-group copied to clipboard

Warning: findDOMNode is deprecated in StrictMode.

Open shanhai3000 opened this issue 2 years ago • 8 comments

I've looked through the historical issues, but none of them worked in my case.

The code is roughly like this

                             <tbody>    
				<TransitionGroup component={null} >
					{
						anArrayInReduxStore.map((e, _) => {
							<CSSTransition key={e.id} classNames="fade"
								timeout={300}
								appear={true}
								exit={false}
							>
								<CustomComponent  data={e}/> //a very complex row in a table
							</CSSTransition>
						})

					}
				</TransitionGroup>
                             </tbody>

If i use code below, the warning will disapear, but the animation is gone, and the more serious thing is, when i remove element in {anArrayInReduxStore}, the Row Element doesn't remove

The code is roughly like this

    const TransitionNode = ({ e }) => {
		const nodeRef = React.useRef(null)
		return (
			<CSSTransition key={e.id} classNames="fade"
				timeout={300}
				appear={true}
				nodeRef={nodeRef}
			> 
			      <CustomComponent  data={e}/> //a very complex row in a table
			</CSSTransition>
		);
	}
                          <tbody>    
				<TransitionGroup component={null} >
					{
						anArrayInReduxStore.map((e, _) => {
							<TransitionNode key={e.id} data={e} />
						})
					}
				</TransitionGroup>
                         </tbody>

shanhai3000 avatar Oct 20 '23 21:10 shanhai3000

I am afraid that this library is unmaintained, mate 😕 this exact thing had me looking for an alternative months ago

oreqizer avatar Oct 23 '23 08:10 oreqizer

I am afraid that this library is unmaintained, mate 😕 this exact thing had me looking for an alternative months ago

@oreqizer what alternative did you find?

RotemCarmon avatar Nov 01 '23 18:11 RotemCarmon

@RotemCarmon started using raw @keyframes and CSS animations together with react-aria state

a more direct alternative is the react-transition-state hook

oreqizer avatar Nov 02 '23 11:11 oreqizer

@RotemCarmon started using raw @keyframes and CSS animations together with react-aria state

a more direct alternative is the react-transition-state hook

Hi @oreqizer, do you have any examples I could look at per chance?

drikusroor avatar Dec 13 '23 15:12 drikusroor

This look like a duplicate of this issue. You have to pass a ref to your <CustomComponent> as well for the animation to work.

Arkellys avatar Dec 21 '23 15:12 Arkellys