@oyvindher/react-reportr v0.1.6

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

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

despawn