How to get variant value inside content of SnackbarProvider

Question

I am using notistack library for showing snackbar in my application. I wanted to customise the content of snackbar. Hence using content property of snackbar. I wanted to know whether the message variant is success or warning or error, and based on that I want to set the color. of toast. Below is a sandbox URL: https://codesandbox.io/s/optimistic-hellman-2gcs0?file=/App.js

How can I get the variant value inside ToastTemplate?

Answer 1

Inside your export const enqueueSnackbar = (notification) => { function you have the notification object, which has the options and variant that you can use:

export const enqueueSnackbar = (notification) => {
    const key = notification.options && notification.options.key;
    const variant = notification.options && notification.options.variant;
    console.log(variant);

    console.log(notification);
    return {
        type: ENQUEUE_SNACKBAR,
        notification: {
            ...notification,
            key: key || new Date().getTime() + Math.random(),
        },
    };
};

Update

Since you want to variant inside the SnackbarProvider, you can pass the entire data (and not only the text-message) and use what you need inside.

export const enqueueSnackbar = notification => {
  const key = notification.options && notification.options.key;
  return {
    type: ENQUEUE_SNACKBAR,
    notification: {
      message: { ...notification },
      // ^ Instead of passing the text - I'm passing the entire object
      key: key || new Date().getTime() + Math.random()
    }
  };
};

Inside the SnackbarProvider:

<SnackbarProvider
  content={(key, notificationData) => {
    const message = notificationData.message;
    const variant = notificationData.options.variant
    console.log(variant);
    return <ToastTemplate id={key} message={message} />;
  }}
>

Check here the working example: https://codesandbox.io/s/flamboyant-ramanujan-1p7yw?file=/index.js