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.

<output
	className="snackbar fixed bottom-0 left-0
	right-0 m-auto bg-[#121212] text-white
	flex items-center h-12 rounded-t-lg z-10
	opacity-0 text-2xl"
>
	<span className="content p-4">{toastText}</span>
	<button
	  className="action ml-auto cursor-pointer
	  p-4 focus:outline focus:outline-1
	  focus: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#

<output
  className="snackbar fixed bottom-0 left-0
  right-0 opacity-0"
>
	<span>{toastText}</span>
	<button
	  onClick={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.

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 the opacity: 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/