react-better-notifications

react-better-notifications

Every kind of notifications implemented in react

Installation

To install and set up the library, run:

$ npm install react-better-notifications

Or if you prefer using Yarn:

$ yarn add react-better-notifications

API

NotificationProvider

import { NotificationsProvider } from "react-better-notifications";

<NotificationsProvider>
    <App />
</NotificationsProvider>

Adding the Notifications Provider at the root of you app will let you use the addNotification function from the NotificationContext hook to send notifications.

NotificationsProvider

Parameter	Type	Description
useDefaultStyle	boolean	Should use default styles or custom ones
notificationsStyle	notificationsStyle	Notifications Styles

notificationsStyle prop:

import React from "react";
import { NotificationsProvider, notificationsStyle } from "react-better-notifications";

const customNotificationsStyles: notificationsStyle = {
  QuickPopupStyle: {
    notificationContainer: {
      backgroundColor: "red",
      borderRadius: "10px"
    },
    messageText: {
      fontWeight: 800
    }
  }
}

<NotificationsProvider useDefaultStyle={false} notificationsStyle={customNotificationsStyles}>
  <App />
</NotificationsProvider>

NotificationContext & notify:

import { useNotification } from "react-better-notifications";

const notify = useNotification();

const MyComponent: React.FC = () => {
  const { data, error, loading } = useBasicFetch<Quote>('https://quotes.rest/quote/random?language=en&limit=1', 2000);

  if (error) {
    return notify(
      {
        type: "quickpopup",
        emoji: "⚠️",
        message: error
      })
  }
  
  if (loading) {
    return notify(
      {
        type: "quickpopup",
        emoji: "🔄",
        message: "Loading..."
      })
  }

  return (
    <div className="app">
      <h2>Super cool random Quote:</h2>
      {data && data.value && <p>{data.contents.quotes[0}.quote</p>}
    </div>
  );
};

notify (hook function)

Parameter	Type	Description
type	string	Notification type
emoji	string	Notification emoji
message	string	Notification type