Project 28 / 100 - React Snackbar with Shared Context in Material UI
Tags: react, javascript, angular, 100daysofcode
Published: 2021-01-06 06:29:05

*Hey! I'm on a mission to make 100 React.js projects ending March 8th. Please follow my dev.to profile or my [twitter](https://www.twitter.com/jwhubert91) for updates and feel free to reach out if you have questions. Thanks for your support!*

Link to today's deployed app: [Link](https://100-react-projects-day-28-material-ui-snackbar.netlify.app/)
Link to the repo: [github](https://github.com/jwhubert91/100daysofreact/tree/master/day-28-context-snackbar-alert)

Today was another mini-project as I continue to get used to the new job and put a lot of energy and computer time towards it. That said, I really love this exercise as it clearly demonstrates how to properly use the Context API and also shows off using Material UI and a new way of labeling files in a React project.

Tutorial here: [link](https://itnext.io/understanding-the-react-context-api-through-building-a-shared-snackbar-for-in-app-notifications-6c199446b80c)

This project had two dependencies: `@material-ui/core` and `@material-ui/icons`. I suspect that together these are fairly large packages because I noticed that today's project took substantially longer than normal to compile on my local server, but the results are great.

##The Lesson
Context API is a set of information shared *optionally* across your React application. A `provider` component creates a way to change context (and therefore app-wide state, in a way) to any sub-components that use it. A `consumer` component simply provides a way to consume data from the app-wide context and display that data.

We instantiate them by setting a new variable equal to `React.createContext` that we'll call `SharedSnackbarContext`. We then create the provider and consumer with `SharedSnackbarContext.Provider` and `SharedSnackbarContext.Consumer` respectively, then export both for use.

Both of these components are defined within a context file. I stored this file in a `providers` folder because that's how Bob Ziroll did it in his excellent React Bootcamp. You can of course put everything directly in `/src` if you like.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lunn4y7xk7n46yd2ktw0.png)

##Material UI
I hadn't used Material UI before so it was a trip to see it used in this little project. The way the author used it was to import components like `IconButton` and `Snackbar` from `@material-ui/core`. These components are then given styling props like `primary` for blue and `secondary` for red in the color prop. 

The Google/Angular style of coding revealed itself also in the naming of components, which was interesting. The author used a Javascript labeling scheme whereby components were labeled Title.Component.js and the context file was labeled Title.Context.js. VS Code then automatically labeled these as Angular files, which was interesting.

Anyway, I recommend this project for anyone looking for an easy way to practice Context and a soft introduction to Material UI. I'm not a huge fan of the Material UI theme as it makes everything look like a Google product in my opinion, but it's pretty cool that the Javascript and CSS are both built into the components in `@material-ui/core` and it's so easy to use. As a Bootstrap fan I can attest that these few pre-built components were easier to implement than Bootstrap's React components, in my opinion.

5/5 stars would code again.