Showing Notifications on state/context change

[MattHeslington]

Hello,

Fantastic library, thank you!

Could anyone explain to me how to call show a notification based on a change of state or context, please? Something like:

{appState.loading === true ? notifications.showNotification({ title: 'Uploading data', message: 'Your domain is being uploaded to our servers! 🤥', loading: true, disallowClose: true }) : null}

[rtivital]

Hi Matt, the best way to do this is to integrate notifications.showNotification handler directly into where state is managed, for example in function where you fetch the data:

  const [loading, setLoading] = useState(false);
  const notifications = useNotifications();

  const startLoading = () => {
    setLoading(true);
    notifications.showNotification({ loading: true, message: 'Loading your data' });
  }

You can also subscribe to state via useEffect at any component (not recommending this though as it will be hard to debug this in future):

  useEffect(() => {
    loading &&
      notifications.showNotification({
        loading: true,
        message: "Loading your data",
      });
  }, [loading]);

[MattHeslington]

Oh yes, useEffect 🤦🏻‍♂️ Fantastic, thank you so much for help!

[cstrat]

I just threw together this example.

https://codesandbox.io/s/notification-state-change-358cc

It is watching a state variable, but could just as easy be watching any input prop too.

[cstrat]

This example is really only showing you how you can watch a variable and show an alert if you don't have control over the action triggering the variable change.
Like @rtivital said - you're better off calling the showNotification directly from the function where the action is being triggered.

[MattHeslington]

Thank you @cstrat, much appreciated