@oyvindher/react-reportr

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