DEV Community

Cover image for How to setup React global alert popup in 10mins
Jeffrey Yu
Jeffrey Yu

Posted on

How to setup React global alert popup in 10mins

It's annoying to add alert popup in every component after an action. A global alert popup not only make your life easier, but also improves user experience. A nice alert popup give users a clear feedback as a result of their actions and any server reponse.

Here's how you can set up global alert popup in React in 10 minutes using context hook.

Create AlertContext

Our alert context has two states: text and type. text is the displayed message on the alert, and type is the "severity" of the alert (success / info / warning / error).

The context has one action: setAlert(). It takes in text and type as parameters and set them to the state. After a set time period, the state will be set back to empty.

// AuthContext.js
import { createContext, useState } from 'react';

const ALERT_TIME = 5000;
const initialState = {
  text: '',
  type: '',
};

const AlertContext = createContext({
  ...initialState,
  setAlert: () => {},
});

export const AlertProvider = ({ children }) => {
  const [text, setText] = useState('');
  const [type, setType] = useState('');

  const setAlert = (text, type) => {
    setText(text);
    setType(type);

    setTimeout(() => {
      setText('');
      setType('');
    }, ALERT_TIME);
  };

  return (
    <AlertContext.Provider
      value={{
        text,
        type,
        setAlert,
      }}
    >
      {children}
    </AlertContext.Provider>
  );
};

export default AlertContext;

Enter fullscreen mode Exit fullscreen mode

Don't forget to wrap the context provider around your app components.

// index.js
ReactDOM.render(
  <AlertProvider>
   <App />
  </AlertProvider>,
  document.getElementById('root')
);
Enter fullscreen mode Exit fullscreen mode

Custom useAlert hook

Create a custom useAlert hook to access state and actions in AlertContext.

// useAlert.js
import { useContext } from 'react';
import AlertContext from '../contexts/AlertContext';

const useAlert = () => useContext(AlertContext);

export default useAlert;
Enter fullscreen mode Exit fullscreen mode

Popup Component

Next, we create a popup component that displays the alert with text and type from useAlert. The popup will appear once setAlert passes text and type to AlertContext, and will disappear after the set time period.

I use Alert from MaterialUI to make it look nicer.

// AlertPopup.js
import { Alert } from '@mui/material';
import useAlert from '../../hooks/useAlert';

const AlertPopup = () => {
  const { text, type } = useAlert();

  if (text && type) {
    return (
      <Alert
        severity={type}
        sx={{
          position: 'absolute',
          zIndex: 10,
        }}
      >
        {text}
      </Alert>
    );
  } else {
    return <></>;
  }
};

export default AlertPopup;
Enter fullscreen mode Exit fullscreen mode

Put AlertPopup on top of your app components so it's visible anywhere.

//route.js
const routes = [
  {
    path: '/',
    element: (
      <AlertPopup />
      <Dashboard />
    ),
    children: [ ... ]
  }
]
Enter fullscreen mode Exit fullscreen mode

Use it in your components

Call setAlert on action feedbacks in your components to show the alert popup.

const { setAlert } = useAlert();
...
<Button onClick={setAlert('Edit success!', 'success')}>
  Edit
</Button>
Enter fullscreen mode Exit fullscreen mode

Success Alert

It's always nice to use alert to show server response to the user.

try {
  const res = await axios.post('api/user/login');
  setAlert('Login success!', 'success');
} catch(err) {
  setAlert(err.message, 'error');
}
Enter fullscreen mode Exit fullscreen mode

Discussion (0)