Up next in 10
React react-toastify Example to Show Toast Notification Messages in Browser Using JSX
Jan 9, 2025
Buy the full source code of application here:
View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so in this video we will look at a toast
0:05
notification Library specifically built
0:08
for react chairs so this is actually a
0:10
demo here react toasttify the library
0:13
name we have a button right here we can
0:15
click the button and the notification
0:17
message will appear on the right hand
0:20
corner of the screen if you see right
0:22
top side of the corner so it's a simple
0:25
notification so this can be used for
0:28
various purposes inside your application
0:31
so if you go to npmjs.com
0:34
just search for this Library react
0:39
toasttify
0:42
so this is actually the package here it
0:44
supports various themes you can see
0:46
various icons almost 3 million weekly
0:49
downloads so this is actually the
0:50
command here I already installed it so I
0:54
will actually show you a very basic
0:56
example of how to use this so
1:00
just make a simple functional
1:03
component and then we just need to
1:05
import this module using the import
1:08
statement which is uh we'll use the
1:11
toast container plus the
1:14
toast so these two things will be coming
1:16
from react toasttify so after you import
1:21
this we will just make a simple method
1:24
which will show the notification message
1:26
I will just call this as notify
1:30
so what this method it do it uses a
1:32
toast
1:35
method we are using this method here
1:37
toast and right here we basically
1:40
provide us the message any message you
1:43
can provide so I'm just providing out
1:46
this is a toast
1:50
notification and then it takes some
1:52
options you can control the look and
1:54
feel of the PO toast so where you need
1:56
to appear this message so there is a
1:59
position prop property so there are six
2:01
choices available bottom center bottom
2:04
left bottom right top Center top left
2:06
top right let me select here top right
2:10
position then we also have the autoclose
2:13
property so it actually how many seconds
2:16
you want the toast to display on the
2:18
screen so I will say 5,000 millisecond
2:21
so this evaluates to 5
2:24
seconds and then we have the next
2:26
property which is if you want to hide
2:28
the progress bar you will say I don't
2:31
want to hide it so I will say
2:33
false and then there is a property if
2:35
you close on the toast then it should
2:38
close so I will just say
2:40
true and then if you want to pause on
2:44
hover if you hover onto the notification
2:47
message if you want to pause it you will
2:50
set it to true and dragable dragable you
2:53
can drag your toast notification message
2:56
if you put this property so I will give
2:59
these properties here and then you can
3:01
control it accordingly and now to
3:03
display this toast notification message
3:05
we will inside this div I will say
3:10
react toast example now to show inside
3:14
whatever container that you want so
3:16
you'll be using this toast container
3:17
that we imported early on so write
3:20
whichever location you want to put you
3:22
just need to put toast container that's
3:25
all so we will now need a simple button
3:29
so that when we click the button the
3:31
notification message should appear so
3:34
you will bind this onclick listener to
3:36
this button so when we click the button
3:39
we will execute this function which is
3:41
called as notify so we just need to
3:44
Define this we have already defined this
3:47
function notify so we are simply calling
3:49
it on button click so if you just
3:56
uh click the button now
4:00
you will see the notification message is
4:02
showing but the Styles have been so we
4:04
do need to import the stylesheet as well
4:07
so for this specific Library so just
4:09
import
4:10
this which is located
4:13
inside react tosty file inside the disc
4:17
folder we need to import the CSS files
4:21
react toasttify do CSS so you do need to
4:26
import the CSS file like this so once
4:28
you import this click the button button
4:30
you will see the notification message
4:32
will appear and also see the progress
4:35
bar it appears for 5 seconds so if you
4:38
click on the toast it will
4:40
close and when you hover onto this it
4:43
will
4:46
stay so in this way you can display you
4:49
can change the position here let's
4:51
suppose I want
4:53
to appear on the bottom right position
4:56
so what it will happen now it will show
5:01
at this position if you see bottom right
5:04
position so if you want to put it in the
5:07
center
5:09
right it will appear in this
5:18
position so you can see all these
5:20
positions are
5:22
supported top left position you can
5:24
control the sizing position everything
5:28
in this way
5:33
so I think top right position is
5:36
great and you can read more about it uh
5:40
basically this
5:41
module shown you just go to npmjs.com
5:44
just search and they do offer various
5:47
themes I've just shown you a very basic
5:50
theme but they do support a lot of
5:52
themes available you can see on the
5:54
screenshot so you can read more about it
5:56
in the documentation and uh this was a
5:59
toast notification module for
6:01
specifically for reactjs applications so
6:04
thank you very much for watching this
6:05
video and do check out my website as
6:08
well free mediat tools.com which
6:10
contains thousands of tools regarding
6:12
audio video and image and I will be
6:15
seeing you in the next video