OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to animate when a component is unmounted in React ts?

  • Thread starter Thread starter Brayan Gomez
  • Start date Start date
B

Brayan Gomez

Guest
I hope you are all doing very well, I just wanted to know how to create an animation when a React component is unmounted. If it can be achieved with CSS, that would be even better.

I have attached two React TSX components below, feel free to modify them as you see fit:

Code:
import { useState } from "react";
import { useStatus } from "../../../store/error.store";

export const useCleaningMessages = () =\> {
const {clearMessagesStatus } = useStatus()
const \[hidden, setHidden\] = useState\<boolean\>(false)
const handleClose = () =\> {
setHidden(true)
clearMessagesStatus()
};

    return { hidden, handleClose }

};

Code:
import { GrClose, GrStatusGood } from "react-icons/gr"
import { useCleaningMessages } from "./hooks/useCleaningMessages"

const AlertSuccess = ({message}: {message: string}) =\> {
const { handleClose, hidden } = useCleaningMessages()
return (
\<div className={`${!message  && 'hidden'} ${hidden && 'hidden'} flex animation-bottom-center min-w-[320px] max-w-[320px] justify-center items-center py-1 px-2 rounded-md text-green-600 font-extrabold bg-green-100 shadow-lg bg-opacity-60 bg-fixed bg-cover bg-center mx-auto relative backdrop-blur-3xl          `} \>
\<div slot="avatar"\>
\<GrStatusGood className="text-3xl mr-2" /\>
\</div\>
\<div className="text-xl font-normal  max-w-full flex-initial"\>
\<div className="py-2"\>Todo a salido bien:
\<div className="text-sm font-base"\>{message}\</div\>
\</div\>

            </div>
            
            <button className="relative flex flex-auto flex-row-reverse justify-center cursor-pointer items-center focus:scale-[2] transition-all" onClick={handleClose}>
               <GrClose className="text-3xl ml-2 hover:bg-green-200 hover:p-1 rounded-full transition-all ease-out" />
            </button>
        </div>
    )

}

export default AlertSuccess

<p>I hope you are all doing very well, I just wanted to know how to create an animation when a React component is unmounted. If it can be achieved with CSS, that would be even better.</p>
<p>I have attached two React TSX components below, feel free to modify them as you see fit:</p>
<pre><code>import { useState } from "react";
import { useStatus } from "../../../store/error.store";

export const useCleaningMessages = () =\> {
const {clearMessagesStatus } = useStatus()
const \[hidden, setHidden\] = useState\<boolean\>(false)
const handleClose = () =\> {
setHidden(true)
clearMessagesStatus()
};

return { hidden, handleClose }

};
</code></pre>
<pre><code>import { GrClose, GrStatusGood } from "react-icons/gr"
import { useCleaningMessages } from "./hooks/useCleaningMessages"

const AlertSuccess = ({message}: {message: string}) =\> {
const { handleClose, hidden } = useCleaningMessages()
return (
\<div className={`${!message && 'hidden'} ${hidden && 'hidden'} flex animation-bottom-center min-w-[320px] max-w-[320px] justify-center items-center py-1 px-2 rounded-md text-green-600 font-extrabold bg-green-100 shadow-lg bg-opacity-60 bg-fixed bg-cover bg-center mx-auto relative backdrop-blur-3xl `} \>
\<div slot="avatar"\>
\<GrStatusGood className="text-3xl mr-2" /\>
\</div\>
\<div className="text-xl font-normal max-w-full flex-initial"\>
\<div className="py-2"\>Todo a salido bien:
\<div className="text-sm font-base"\>{message}\</div\>
\</div\>

</div>

<button className="relative flex flex-auto flex-row-reverse justify-center cursor-pointer items-center focus:scale-[2] transition-all" onClick={handleClose}>
<GrClose className="text-3xl ml-2 hover:bg-green-200 hover:p-1 rounded-full transition-all ease-out" />
</button>
</div>
)

}

export default AlertSuccess
</code></pre>
 

Latest posts

Top