@magicdidac/notifications

This is a package to be able to use notifications in any react application.

Install

With npm

npm i @magicdidac/notifications

With yarn

yarn add @magicdidac/notifications

Examples

These are some examples of the four types of notification.

How to use

NotificationProvider

index.tsx

import {NotificationProvider} from '@magicdidac/notifications'
...
<React.StrictMode>
  <NotificationProvider>
    <App />
  </NotificationProvider>
</React.StrictMode>
...

Properties

| Property | Description | Default | Values | |-----------|---------------------------------------------------------------|------------------|-------------------------------------------------------| | positionX | The horizontal position where the notifications will be shown | PositionX.right | PositionX.left | PositionX.center | PositionX.right | | postionY | The vertical position where the notifications will be shown | PositionY.bottom | PositionY.top | PositionY.bottom | | width | The width of the notifications | 400px | string |

useNotifications

This is a hook to invoke notifications

import { useNotifications } from '@magicdidac/notification'
...
const notifications = useNotifications()
...
return (
 <button onClick={() => notifications.success("Working!")}>Click Me!</button>
)
...

Functions

Every function has the same parameters | Parameter | Description | Optional | Default | |-------------------|--------------------------------------------------------------------|----------|---------| | message | The message to show | No | | | options.autoClose | Set to true to close the notification automatically over 5 seconds | Yes | true |

These are all the functions

| Function | Example | |----------|----------| | .success || | .error | | | .warning || | .info | |