Build a Toast Message | React Components Made Easy

by the end you will have a customizable toast message component exactly like this one that you can use anywhere in your react application we will create this without installing any popular libraries such as react toastify or react hot toast let's start I have an empty react project with a button in the middle the goal is to press the button and it should trigger a toast message in the components folder we create three files toast.tsx toast.css and toast context.ts I'm going to write all the necessary code in these three files first we start with the toast.tsx and import The Styling file so we don't forget let's create our basic toast component which is going to take in a message and a close function as its props we render The Message In A P tag and also a button I'm going to give this button the Unicode value of a cross to keep things simple let's also give this container class name of toast so we can style it later give the button a class name of close button so we can style that as well add the close function as an on click on the button so we can close the toast Define the types for this component the message is going to be a string and close is going to be a void function now that we have defined our basic toast component let's head over to the toast context file and create some context for the test messages using the create context API in react this will allow us to handle and update our test messages anywhere in our application we will Define its types and initially give it a value of null because we are going to set it later the context value is going to be two functions open and close open will take in a message through render and close will take in an ID to close the toast in the same file export a used toast hook so we can import it anywhere and use it whenever we need we are now fully done with this file and can leave it alone for the rest of the video go back to the toast.tsx file and now we are going to build the test provider component that is going to be at the root level of the project the only prop is going to have is children which are going to be react elements import the tourist context that we created and return the children inside the toast contacts provider let's save that and Define our types for this component because we are in typescript now let's actually start the work on managing our toast messages create a state for your toasts this is going to be an array of toasts that are going to have an ID and a message in this component alongside the children we're going to map the toast messages array and render the toast components we created for each one of these messages in this component we pass the message and the close function we haven't created yet to remove the test message save and format we are very close to finishing this component and rendering our messages let's create the two functions to open and close our messages this is what the two functions look like the open function creates a new toast and the ID I give it is the current date this is so each toast is always unique with their ID and the close function takes that ID and filters it out of the toast messages array and updates the state put the two functions in an object and use use members so we can cache the functions saving some computing power add the context value inside the provider and now we are ready to use this component go to the root level of your project in my case this is the main.tsx file and wrap your whole app component Tree by the toast provider we created now these functions are available everywhere throughout the app and we can render our toast messages let's now test this by going back to our button in app.tsx file import the toast using the use toast hook and on the on click of the button try toast dot open with a message we should see a toast message rendering all that is left is styling now before we go to the CSS file in our toast provider component we'll wrap the toast mappings in a div and give it a class name of toasts so we can style them now let's go over to our CSS file and first style the toasts container the main thing here to note is that we want this to always be in the top right position so I give it a position of fixed and adjust it accordingly you can place it bottom right bottom left top left wherever you like by using the position fixed attribute I also want each toast to have a little gap between them so I use the flexbox to achieve that Gap once we have the container style that we wish let's work on the actual toast message give it a color you like and want your website to have put your radius and your desired width also style your button using the close button class name once we have styled the toast message how you like let's add an animation to it we add the animation by giving it a property of Animation name also add an animation duration property I want this animation to be 0.35 seconds long then you create keyframes with the animation name and this is how you achieve the sliding animation by changing the translate X values the toast message looks great but there is one last thing missing and that is The Thirst message also closing after some time let's Implement that by going back to our toast.tsx file to achieve Auto closing we need to create one last custom hook and call that in our toast component we will call this use timeout this is what the custom hook looks like it takes in a callback function and stores it in a used rack every time the function updates we update the reference value the Callback function is then run in another use effect after the component successfully loads this means that each test message will only automatically close once it fully renders time for a final test and now you can see that all the test messages close by themselves after three seconds you can watch How to Build a tooltip component by clicking on the video on the right otherwise thank you

Channel: Sphorb

Views: 1,316

Keywords:

Id: 52g9qcTD6ZI

Length: 6min 28sec (388 seconds)

Published: Sun Sep 03 2023