React Reportr

Easiest notification spawner of all time, highly customizable!

Installation

With NPM:

npm install @oyvindher/react-reportr

or with Yarn:

yarn add @oyvindher/react-reportr

Usage

import {
  NotificationProvider,
  useNotification,
} from "@oyvindher/react-reportr";

const App: React.FC = () => {
  return (
    <NotificationProvider>
      <Example />
    </NotificationProvider>
  );
};

const Example: React.FC = () => {
  const { spawn } = useNotification();

  return (
    <div>
      <button
        onClick={() =>
          spawn({
            title: "Hey, I am a notification",
          })
        }
      >
        Spawn notification!
      </button>
    </div>
  );
};

Tip: If your app doesn't support hooks yet, you can always use regular Context from the exported NotificationContext in React Reportr.

API

NotificationProvider

On the provider, you can specify a settings props to customize even more to your own needs.

<NotificationProvider settings={mysettings}></NotificationProvider>

Settings options

| Option | Type | Default | Required | | ------------------- | -------------------------------------- | ------- | -------- | | despawnTime | number | 2400 | false | | verticalDirection | top, bottom | top | false | | horizontalDirection | left, right | right | false | | customNotification | React.FC<NotificationStackInterface> | null | false |

The default design of the notifications might not suit your app. Here's an example of making a custom one!

const MyCustomNotifcation: React.FC<NotificationStackInterface> = ({
  id,
  title,
  subtitle,
  variant,
  despawning, // used for animations on unmounting
}) => {
  return (
    <div>
      <h2>{title} 👋</h2>
      <small>{subtitle}</small>
    </div>
  );
};

const App: React.FC = () => {
  return (
    <NotificationProvider
      settings={{
        customNotification: MyCustomNotifcation,
      }}
    >
      {/*....app code*/}
    </NotificationProvider>
  );
};

useNotification

useNotification is a helpful React hook to easily make notifications across your code base. It gives you a way of spawning and despawning notifications. It also gives you the list of spawned notifications, mostly for reference.

const { spawn, despawn, notifications } = useNotification();

spawn

| Option | Type | Default | Required | | -------- | ---------------------------------------------- | --------- | -------- | | id | string | 2400 | false | | title | string | | true | | subtitle | string | undefined | false | | variant | info, success, warning, danger, info | info | false |

despawn

| Option | Type | Default | Required | | ------ | -------- | --------- | -------- | | id | string | undefined | true |