Ever wondered how to hide elements after a few seconds in React?
Problem statement: I want to show elements and make them disappear after a few seconds in React.
Solution: use setTimeout method from JavaScript, and hooks from React.
Achieving this behavior in React is similar to how you'd do it in Vanilla JavaScript - by using setTimeout. The only difference is you'll also use React hooks to store the visibility state, and set it to appear or disappear.
Consider this React example:
import React from 'react';
function App() {
return (
<div className="App">
<button>Show alert</button>
</div>
);
}
export default App;
For now we only have a button. But we want an alert to show after clicking the button. Let's add the markup and necessary hooks for that:
import React from 'react';
function App() {
+ const [ isAlertVisible, setIsAlertVisible ] = React.useState(false);
+ const handleButtonClick = () => {
+ setIsAlertVisible(true);
+ }
return (
<div className="App">
- <button>Show alert</button>
+ <button onClick={handleButtonClick}>Show alert</button>
+ {isAlertVisible && <div className='alert-container'>
+ <div className='alert-inner'>Alert! Alert!</div>
+ </div>}
</div>
);
}
export default App;
What we did:
- used
useStatehook to createisAlertVisibleandsetIsAlertVisible. - created a
handleButtonClickfunction for when the button is clicked, and assigned it to theonClickproperty of the button. - added the alert markup, and only show it when
isAlertVisibleis true.
We also want to add styles to the alert section, so it'll look more like an alert:
.alert-container {
position: absolute;
top: 2rem;
left: 0;
right: 0;
}
.alert-inner {
display: inline-block;
padding: 8px 16px;
z-index: 1;
background-color: #ffffff;
box-shadow: 1px 2px 10px -3px rgb(0 0 0 / 70%);
-webkit-box-shadow: 1px 2px 10px -3px rgb(0 0 0 / 70%);
-moz-box-shadow: 1px 2px 10px -3px rgb(0 0 0 / 70%);
}
Now to the important part - we want the alert to disappear after a few seconds. Suppose we want the alert to hide after 3 seconds, so we'll use the useTimeout function, and pass 3000 milliseconds as the second parameter:
import React from 'react';
function App() {
const [ isAlertVisible, setIsAlertVisible ] = React.useState(false);
const handleButtonClick = () => {
setIsAlertVisible(true);
+ setTimeout(() => {
+ setIsAlertVisible(false);
+ }, 3000);
}
return (
<div className="App">
<button onClick={handleButtonClick}>Show alert</button>
{isAlertVisible && <div className='alert-container'>
<div className='alert-inner'>Alert! Alert!</div>
</div>
</div>}
);
}
export default App;
And there you have it! Customize your alert to show more content, change the duration, change its style, go crazy 😉
A good next step is to extract this behavior and turn it into a separate Alert component. Make it accept different props from the parent, such as duration, content, position, and so on. Then whenever you need to alert a message, you can just re-use this Alert component.
Happy coding!
Top comments (0)