How to create a SnackBar with Next.js

Most at times while building websites with features like authentication, popup notifications we usually need a way to opt in to the current user view and show some vital information without taking a lot of the user's attention. Well, if you're aiming to do that then using a snackbar could be your best bit.
My aim through this article is to help you set that up quickly, without having to add UI component libraries like Material UI onto your app.

Road map

1. Prerequisite
2. Creating Simple Snackbar
   1. Create snackbar component
   2. Create Snackbar state with useReducer
   3. Create Snackbar Context
3. Combining everything together

1. Prerequisite

• Nextjs project
  • TypeScript
  • Tailwind CSS
• Little understanding with using useReducer for state management in React

2. Creating Snackbar Component

Create snackbar component

First we'll need to create our snackbar types and props. Create a new folder called components at the root of your project, in the folder create a file called types.ts

components/types.ts

Now we need to create the snackbar component itself. So we'll create a new file in the components folder we created earlier called Snackbar.tsx

components/Snackbar.tsx

With those two steps, you should have a components folder with the following structure.

- components
    | types.ts
    | Snackbar.tsx

So now, we have our Snackbar component ready to be consumed. Next up, we need to create snackbar state.

Create Snackbar state with useReducer

For the state, we principally have to control two things; the Snackbar state when it's open, and the Snackbar state when it's close
So for that, we'll use useReducer to define state logic

You can use useState for this but I'll rather go with useReducer to keep code much more readable

For the reducer function, let's create a folder at the root of your project called lib, and in the folder create another nested folder called utils. Create a file called reducer.ts inside the utils folder, this is the file in which we'll put the reducer code logic.

lib/utils/reducer.ts

Create Snackbar Context

You must be asking yourself, but why use context create a snackbar component??
Shouldn't we just create a snackbar component that we can import when ever we need to use it??

Well, we are using context because we don't want to import the Snackbar component all over our app, we just want to call a function anywhere in our app and that function takes care of adding the Snackbar to the viewport.

From the end of the last section we have our Snackbar component, and the reducer function that manages it's state. Now we'll create a new folder called context in the root level lib folder we created earlier. In the context
folder, let's create a file called SnackbarProvider.tsx

lib/context/SnackbarProvider.tsx

Combining this step and the previous one, you should have a lib folder at the root of your app with the following structure.

- lib
  - context
     | SnackbarProvider.tsx
  - utils
     | reducer.ts

3. Combining everything together

At this point all that's let to do is to add the Snackbar context provider we created above to the _app file in pages/_app.js. This way the snackbar context is available globally

Congrats, we can access the snackbar context globally.
Copy and paste the code below in your pages/index.tsx file to test the component

Here's the link to the production deployment.

custom-nextjs-snackbar.vercel.app

You can equally get the full code have the complete source code on my my github repo

Now that it for this guide, see you next time. And if you like this guide please leave a like.

Comments

[Ryan-Mambou]

Thank you for this insightful article Idriss. I've never heard of snackbars before, looking forward to use your article in implementing them in future!