how to hide a component in react js after a few second - reactjs

Question

hi I design this alert component :
import React from 'react';
import { Alert } from 'antd';
export default function CustomAlert (props) {
return (
<React.Fragment>
{
props.visible ?
<Alert message={props.message} style={{textAlign: 'right', direction: 'rtl' , position: 'fixed', width:'100%', zIndex:'100'}} closable afterClose={props.handleClose}/>
:
null
}
</React.Fragment>
)
}
but I want to hide the alert after 5 second. how can I do this?

Answer 1

You can use setTimeout to auto close the Alert something like this. Find the working example here
export default function CustomAlert(props) {
const [visible, setVisible] = React.useState(props.visible);
React.useEffect(() => {
visible &&
setTimeout(() => {
setVisible(false);
}, props.closeAfter);
}, [props.closeAfter, visible, setVisible]);
return (
<React.Fragment>
{visible ? (
<Alert
message={props.message}
style={{
textAlign: "right",
direction: "rtl",
position: "fixed",
width: "100%",
zIndex: "100"
}}
closable
afterClose={props.handleClose}
/>
) : null}
</React.Fragment>
);
}
And use the component like this in other files,
<CustomAlert visible message="Test Message" closeAfter={5000} />

Answer 2

I solve my problem with this style:
.alert{
-moz-animation: cssAnimation 0s ease-in 15s forwards;
/* Firefox */
-webkit-animation: cssAnimation 0s ease-in 15s forwards;
/* Safari and Chrome */
-o-animation: cssAnimation 0s ease-in 15s forwards;
/* Opera */
animation: cssAnimation 0s ease-in 15s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
text-align: right ;
direction: rtl ;
position: fixed;
width: 100% ;
z-index: 100;
}
#keyframes cssAnimation {
to {
width:0;
height:0;
overflow:hidden;
z-index: -100;
}
}
#-webkit-keyframes cssAnimation {
to {
width:0;
height:0;
visibility:hidden;
z-index: -100;
}
}

Answer 3

I posted an answer with css styling but here is a better answer:
import React, {useEffect} from 'react';
import { Alert } from 'antd';
export default function CustomAlert(props) {
useEffect(() => {
setInterval(() => {
props.handleClose();
},5000 )
}, [])
return (
<React.Fragment>
{props.visible ? (
<Alert
message={props.message}
style={{
textAlign: "right",
direction: "rtl",
position: "fixed",
width: "100%",
zIndex: "100"
}}
closable
afterClose={props.handleClose}
/>
) : null}
</React.Fragment>
);
}