Creating a Pop-up and
adding it to your react application!
6 July, 2021A pretty obvious question would strike your mind, "so, what exactly is that we will be building right now?"
We will be building a tiny pop-up which pops up as soon as the page is loaded. This will have a sample message and a close button on it. If the user does not click on the 'close' button within 5 seconds of the loading of the page, the pop-up disappears.
What are the prerequisites for building this?
All you need to know is how to write JSX, the useState hook,useEffect hook and the setTimeout function.
Let's start off right away!
- We're going to create our main React Component, I will be calling it 'Main' here.
function Main(){
return <div>hi</div>
}
- I'm going to add some sample text between my div(s).
Loading
- We'll now be creating a "PopUp" component which we'll be using in our "Main" component.
function PopUp() {
return (
<div>
Hey! This is our pop-up component!
<button>x</button>
</div>
);
}
Let's also use this PopUp function that we've just created in our Main component. Let's add this line right above the closing div tag.
<PopUp />
</div>
You would now be able to see something like the image below.
(Notice the addition of content from the popup function at the end of the paragraph with the button)Loading
- We shall now be adding state to our button. We will be using the
useState hook for this.
We're resorting to setting the default state as 'false', so as the user clicks on the "x"(the button), the state will be updated to 'true'.
Now, if the state of 'default' is 'false', the pop-up box remains, but if it's true, we do not want to render to pop-up box.
We have our react component "PopUp" which has to necessarily return something, in this case we are returning our pop-up box.
So, how do we get about this?
const [close, setClose] = useState(false)
useEffect(()=>{
setClose(true)
})
if(close) return null;
else{
<div>
Hey! This is our pop-up component!
<button onClick=(()=>setClose(true))>x</button>
</div>
}
- If you actually look at your application now, it works exactly how it should be!
We could stop here, or maaaybeeeee
add a timeout to this pop-up we have created!
- Let's get started!
To have a timeout, we will be using the 'setTimeout' function along with the 'useEffect' hook! How exactly will this work for us?
In lay-man's words, the 'useEffect' hook will be a 'side-effect' to our pop-up function. So, as a 'side-effect' it will set a timer after which it will update the state of 'close' to 'true'. Since the state is changed, the pop-up component's value will be returned as 'null'.
Let's code this down now!
I will also be adding an if-else condition, just to double ensure the 'setTimeout' function.(it's not mandatory though)const [close, setClose] = useState(false)
useEffect(()=>{
if (close) return;
else
setTimeout(() => {setClose(true)}, 5000})
})
if(close) return null;
else{
<div>
Hey! This is our pop-up component!
<button onClick=(()=>setClose(true))>x</button>
</div>
}
Yay! Our pop-up application works!
You might be wondering why I didn't style, I left it upto you to style it as you like! But here's the link of a
Sandbox where I've styled as much as I could (don't judge me but styling bores me :/ ).
Bonus section: How to store data in the local storage?Well to start off with, adding data into the local storage requires a 'key-value' pair. So we'll just get started with creating a 'key-value' pair and store it in the local storage!
We have to add 4 more lines of code in our 'useEffect' hook, and yay we've added data to our local storage!
const Data = {
entry: "name",
name: "prathamkrishna"
}
localStorage.setItem(Data.entry, Data.name);
To see where this Data is stored, open your browser's dev tools and then go to the 'storage' tab.
Loading