How to create a SnackBar with Next.js
Tags: nextjs, react, tutorial, typescript
Published: 2023-02-05 14:20:57

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](https://mui.com/material-ui/getting-started/overview/) 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](https://nextjs.org/docs/getting-started)
  - TypeScript
  - [Tailwind CSS](https://tailwindcss.com/docs/guides/nextjs)
- 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`
 
{% embed https://gist.github.com/tchassijordan/bd019c0a6d569a308b3066173f4aefe6 %}

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`

{% embed https://gist.github.com/tchassijordan/a8ec03e48c58b5e02d0f99345df83052 %}

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`

{% embed https://gist.github.com/tchassijordan/6fb848ed55ec5c3b8e582ad8e7c88a61 %}

### 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`

{% embed https://gist.github.com/tchassijordan/a064af182951d1027e5e9dafcc383010 %}

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

{% embed https://gist.github.com/tchassijordan/7899b2f490dbcaf4abd838a35765a5b2 %}

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

{% embed https://gist.github.com/tchassijordan/d5b9c198be8532e23fcceeafa2b70d1e %}

Here's the link to the production deployment. 
{% embed https://custom-nextjs-snackbar.vercel.app/ %}

You can equally get the full code have the complete source code on my my [github repo](https://github.com/tchassijordan/custom_nextjs_snackbar) 

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