Creating a popup in React with Hooks and Context
Creating a self-closing popup can be done incredibly easily in React with just a few really helpful tools. All we’ll need to do is:
- Create a context for the popup
- Create the popup component that knows how to clear itself
- Trigger the popup to open with whatever text we want
Having a popup like this is a great way to be able to respond to user interactions without being too obtrusive.
Creating the context
When using context in React, I like to split it out into three parts which are really easy to use and remember.
- Creating the context
- Creating the provider
- Creating a way to retrieve the values out of the context
The popup context makes use of the useState hook to store and set the value of the popup.
The triggerPopup and clearPopup are used purely for readability although it is possible to directly have useState as the value of the provider and having usePopup which is a function that returns the value of the context is a neat way to grab those values from around your app.
Creating the popup component
The idea for the popup component is to know when it has received a value to display the popup and clear itself after a given time. This can be achieved with both the useEffect hook and a setTimeout.
Making use of the usePopup hook we created earlier we can grab the value and the clearPopup function. The value will be used in the dependency array of the useEffect to make the component update every time the value changes.
Inside of the useEffect is where the magic happens, we are using a setTimeout to say that after a given time we will clear the value of the popup which will also be the condition as to whether the popup is displayed or not. In this case if there is no value the component will not render anything however I would advise getting creative and adding an additional prop or class name (depending on your flavour of styling) to have the popup fade or fly in.
Triggering the popup
Now that we have a popup that can appear whenever we want it to all we need to do is make it appear.
It really is as simple as getting the triggerPopup function from our nifty hook and calling it with the text that we want to display. As long as this is used in any component within the context provider this can work as onClick events, in callback functions or just about wherever you need it.
Using the popup
I would advise using the PopupProvider at the highest point up the component tree to make sure it is wrapping your entire application to be able to make use of the triggerPopup function wherever you like. The popup can also sit anywhere inside of the application as long as it is inside of the provider.
