How to create a toast or snackbar in React
After reading this web.dev article, I wanted to create toast component in ReactJS and this post showcases the same.
Goal
What we want to achieve is a toast or snackbar that appears when we click the below button.
Let's take a look at the code block and understand what is going on.
Output
tag - few words
There is a HTML tag named <output>
. It is there to be used semantically to show an output of a particular calculation performed by the browser or of an user interactions.
In our case, the latter is the happening.
Toast Component - Final
If you are in a rush, go ahead and copy the code block below for the component.
<outputclassName="snackbar fixed bottom-0 left-0right-0 m-auto bg-[#121212] text-whiteflex items-center h-12 rounded-t-lg z-10opacity-0 text-2xl"><span className="content p-4">{toastText}</span><buttonclassName="action ml-auto cursor-pointerp-4 focus:outline focus:outline-1focus:outline-white focus:bg-[#ffffff11]"onClick={undo}style={{display: actionable ? 'unset' : 'none'}}>Undo</button></output><style jsx>{`.snackbar {width: min(100%, 400px);animation: slide-in 500ms ease, slide-out 500ms 3s;animation-iteration-count: 1;animation-fill-mode: forwards;}.snackbar .action {backgroud: none;border: none;outline: none;color: #8effff;border-radius: 2px;}@keyframes slide-in {from {transform: translateY(100%);opacity: 0;}to {transform: translateY(0%);opacity: 1;}}@keyframes slide-out {to {transform: translateY(100%);opacity: 0;}}`}</style>
Mind that the above toast component expects some properties to function. It is customizable as you noticed.
Understanding the component
Let's dive into the component segments to understand what is happening.
The HTML
<outputclassName="snackbar fixed bottom-0 left-0right-0 opacity-0"><span>{toastText}</span><buttononClick={undo}style={{display: actionable ? 'unset' : 'none'}}>Undo</button></output>
<output>
tag is a presentational tag and holds nothing specific. It is named semantically.
We place here the toast message and the possible action. A toast can be either actionable
or simply an informational notification.
I have simplified the code by eliminating the cosmetic changes. The same will be done on the following.
The CSS
.snackbar {width: min(100%, 400px);animation: slide-in 500ms ease, slide-out 500ms 3s;animation-iteration-count: 1;animation-fill-mode: forwards;}@keyframes slide-in {from {transform: translateY(100%);opacity: 0;}to {transform: translateY(0%);opacity: 1;}}@keyframes slide-out {to {transform: translateY(100%);opacity: 0;}}
Above we are trying to animate the output
tag during the first render. There are two animations happening.
Animation | Purpose |
---|---|
slide-in | Upon first render slide in the toast with ease on 500ms delay. |
slide-out | After 3s delay, slide out the toast. |
width: min(100%, 400px)
is handy to make the toast responsive. Try it out with mobile view in Dev Tools.
animation-fill-mode: forwards
is important here to keep theopacity: 1
once the slide-in animation is done. Otherwise it will go back to the declaration (opacity:0
).
output {position: fixed;bottom: 0;left: 0;right: 0;}
The above css makes the toast appear on the bottom.
Try to make the toast show up at the top of the page. Do not forget to update the animations. \O/