Easiest notification spawner of all time, highly customizable!
With NPM:
npm install @oyvindher/react-reportr
or with Yarn:
yarn add @oyvindher/react-reportr
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
.
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 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();
Option | Type | Default | Required |
---|---|---|---|
id | string |
2400 | false |
title | string |
true | |
subtitle | string |
undefined | false |
variant | info , success , warning , danger , info |
info | false |
Option | Type | Default | Required |
---|---|---|---|
id | string |
undefined | true |