Creating a popup in React with Hooks and Context

Photo by Arthur Poulin on Unsplash

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.




Front end developer at Climb Creative

Recommended from Medium

Create HTML using JavaScript’s Template Strings

Wallpaper Aesthetic Putih

Adding Headless CMS To Eleventy

How to get your team to buy into Typescript

Primitive vs Reference Types (JavaScript)

Server-Side Web Development with Koa JS

New improvements and custom components in Dashbuilder

JavaScript Core Concepts

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Daniel Billson

Daniel Billson

Front end developer at Climb Creative

More from Medium

React Modal the reusable way (TS)

React. What about without redux, context ?

Global variables using Styled Components

Why we need React.JS: