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.
- Creating Simple Snackbar
- Create snackbar component
- Create Snackbar state with useReducer
- Create Snackbar Context
- Combining everything together
- Tailwind CSS
- Little understanding with using
useReducerfor 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
Now we need to create the snackbar component itself. So we'll create a new file in the
components folder we created earlier called
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
useStatefor this but I'll rather go with
useReducerto 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.
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
folder, let's create a file called
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.
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.
Top comments (1)
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!