Material UI | How to easily setup popup notifications

Sun, 12 Dec 2021 00:00:00 +0000

Using Material UI and React Context to set up global notification system.

Need for global notification system

In your application, you want have good user experience and let the user know if the actions/clicks have resulted in success or failure. We should also show warning and information messages to guide user through the flows.

It is of course possible to display a local popup component wherever needed, but it quickly becomes a bloat and irritating to manage. It would be really cool to just set up the whole system once and trigger it from wherever from the app to get consistent experience.

Material UI | How to easily set up dark theme toggle in React

Wed, 20 May 2020 00:00:00 +0000

Scaffold React Application

A new react app is easily scaffolded using

npx create-react-app my-app

Install dependencies

I need to install material ui core package.

// with npm
$ npm install @material-ui/core

// with yarn
$ yarn add @material-ui/core

Wrap application in Theme Provider

For the purpose of this demo, I will use App.js to set up everything.

Add Light and Dark themes

export const light = {
  palette: {
    type: "light",
  },
};
export const dark = {
  palette: {
    type: "dark",
  },
};

Import ThemeProvider and createMuiTheme

import { ThemeProvider } from "@material-ui/core";
import { createMuiTheme } from "@material-ui/core/styles";

Set up the toggle logic

const [theme, setTheme] = useState(true);
const icon = !theme ?  : ; // Icons imported from `@material-ui/icons`
const appliedTheme = createMuiTheme(theme ? light : dark);

Wrap the render inside ThemeProvider and pass the appliedTheme

return //rest of the code;

Trigger toggle using onClick

onClick={() => setTheme(!theme)}