Version: 2.5.0

Notifications

Call it to create a notification from anywhere, even outside React. Make sure you add the <Notification/> component to your app first.

import { Notification, notify } from "@pelcro/react-pelcro-js";

const App = () => {
  return (
    <div className="pelcro-root">
      <Notification />
      <button onClick={() => notify.success("Successfully created!")}>
        Notify
      </button>
    </div>
  );
};

Available Notification options#

You can provide NotificationOptions as the second argument. They will overwrite all options received from <Notifiction/>.

notify("Hello World", {
  duration: 4000,
  position: "top-center",
  // Styling
  style: {},
  className: "",
  // Custom Icon
  icon: "👏",
  // Change colors of success/error/loading icon
  iconTheme: {
    primary: "#000",
    secondary: "#fff",
  },
  // Aria
  ariaProps: {
    role: "status",
    "aria-live": "polite",
  },
});

Creating a notification#

Blank#

notify("Hello World");

Success#

notify.success("Successfully created!");

Error#

notify.error("This is an error!");

Loading#

notify.loading("Waiting...");

Promise#

This shorthand is useful for mapping a promise to a notify. It will update automatically when the promise resolves or fails.

const myPromise = fetchData();

notify.promise(myPromise, {
  loading: "Loading",
  success: "Got the data",
  error: "Error when fetching",
});

Advanced#

notify.promise(
  myPromise,
  {
    loading: "Loading",
    success: (data) => `Successfully saved ${data.name}`,
    error: (err) => `This just happened: ${err.toString()}`,
  },
  {
    style: {
      minWidth: "250px",
    },
    success: {
      duration: 5000,
      icon: "🔥",
    },
  }
);

Confirm#

A custom notification used in user confirmation dialogs. Can be helpful for asynchronous operations.

notify.confirm(
  (onSuccess, onFailure) => {
    cancelSubscription(onSuccess, onFailure);
  },
  {
    confirmMessage: "Are you sure you want to cancel your subscription?",
    loadingMessage: "Cancelling your subscription",
    successMessage: "Subscription was susccefully cancelled",
    errorMessage: "Error canceling your subscription",
  },
  {
    confirmButtonLabel: "Confirm",
    closeButtonLabel: "Close",
  }
);

Dismiss notification programmatically#

const notificationId = notify.loading("Loading...");
// ...
notify.dismiss(notificationId);

Dismiss all notifications at one#

notify.dismiss();

Update an existing notification#

const notificationId = notify.loading("Loading...");

// ...
notify.success("This worked", {
  id: notificationId,
});

Render JSX custom content#

You can provide a React component instead of text.

notify(
  <span>
    Custom and <b>bold</b>
  </span>,
  {
    icon: <Icon />,
  }
);

Advanced#

You can also supply a function that receives the notification as an argument, giving you access to all properties. This allows you to access the notification id, which can be used to add a dismiss button.

notify(
  (t) => (
    <span>
      Custom and <b>bold</b>
      <button onClick={() => notify.dismiss(t.id)}>Dismiss</button>
    </span>
  ),
  {
    icon: <Icon />,
  }
);

Reference#

Under the hood, we are using react-hot-toast for our notifications UI.