Posted on Sep 10 Do you have to implement a feature that requires you to prompt a user for response (for example the confirmation message before deleting an item)? Or do you want to have a "awesome" designer who designed an awesome component for notifying users on specific actions? Or for the hundred other reasons you have decided to read this article.In this article, We will be implementing a custom alert component for prompting a user to perform an action or notifying a user using ReactJS with Context API.This tutorial makes use of the following languages/technologies and would require you to have a basic knowledge of their usage.Diving into creating the alert component, the first thing you need to do is set up your codebase. Since we are going to be making use of ReactJS you can use any of the React Libraries that are available, but for the purpose of this tutorial, we will be bootstrapping out react application with create-react-appAfter setting up your codebase, you will proceed to structure the codebase as follows.Copy the following code and paste in your Alert.tsx fileNext up, you create a file named index.tsx inside the Alert folder.Inside the index.tsx file, paste the following code;Here you are creating a wrapper for the alert context for the alert component and the children to subscribe to the context changes.Now that you have created the context for the alert component, you will register the context globally by updating the entry file. For this tutorial, you will update the src/index.tsx file. If you are using other frameworks, your entry file might be different (for NextJS, the entry will would be /pages/_app.tsx)Update your src/index.tsx file with the following code.Now that you are done setting up, you will now implement the functionalities for your alert component. In this tutorial, the major functionalities you will be implementing are Now start updating the src/components/AlertProvider.tsx file.First, you need to declare the types that will be used in the functionality.So your file will look like this;Next up, you will create the necessary variables and methods to display and hide the alert component. So your file will look like this:Now that you have implemented the functionality, the next step is to create the component UI and set up the view states based on the configuration in the context. Copy the following code and paste it in the src/components/Alert/Alert.tsxNext up, you style the component. Create a file named styles.module.css in the src/component/Alert folder. Copy the following code and paste it in the styles.module.css fileNow that you have finished implementing the component, you can test the various variations for prompting and notifying the users.Copy the following code and replace your app.tsx file with it.Yayyy, you have successfully implemented a custom alert component in React. I know the article was a bit lengthy, if you have any questions, be sure to leave them in the comments and I will respond. I have also taken the liberty to push the code to github. You can access it [here](https://github.com/haywhy43/create-custom-alert-component-with-react}Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Ethan - Sep 4 Celeste van der Watt - Aug 31 Jayzers - Aug 31 Nevo David - Sep 7 Once suspended, ayo_tech will not be able to comment or publish posts until their suspension is removed. Once unsuspended, ayo_tech will be able to comment and publish posts again. Once unpublished, all posts by ayo_tech will become hidden and only accessible to themselves. If ayo_tech is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Ayomikun Sholademi. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag ayo_tech: ayo_tech consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging ayo_tech will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.