Skip to main content
Version: Next

Notifications

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

Loading...
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>
);
};
Loading...

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");
Loading...

Success#

notify.success("Successfully created!");
Loading...

Error#

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

Loading#

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

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",
});
Loading...

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",
}
);
Loading...

Dismiss notification programmatically#

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

Dismiss all notifications at one#

notify.dismiss();

Update an existing notification#

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

Render JSX custom content#

You can provide a React component instead of text.

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

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 />,
}
);
Loading...

Reference#

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