React toasted notification using hook.

Installation:

1npm i react-toaster-notification --save
2
3# or
4
5yarn add react-toaster-notification

Configuration

On the root of the application.

1import { Notification } from "../src/";
2// rest of the import
3
4const App = (props) => {
5  return (
6    <Router>
7      <App />
8      <Notification />
9    </Router>
10  );
11};

When you want to use a notification.

1import { useNotification } from "../src/";
2// rest of the import
3
4export const Implementation = (props) => {
5  const [Message, action] = useNotification();
6
7  const handleNotification = () => {
8    action.addNotification({
9      title: "Warning",
10      message: "Choose more strong password",
11      type: "warning",
12    });
13  };
14
15  return (
16    <p>
17      <button onClick={handleNotification}>Click</button>
18    </p>
19  );
20};

List of the props global Notification component.

prop	default	type	function
timeout	5000	Number	Global timeout value for notification
colors	{...}	Object	See possible default object.
position	bottomRight	String	See possible value below.
left	undefined	String	Padding left
right	undefined	String	Padding right
bottom	undefined	String	Padding bottom
top	undefined	String	Padding top

---

• Possible value for position: topRight, bottomRight, topLeft, bottomLeft
• default color object:

1colors: {
2    error: "#E44D4D",
3    warning: "#F1AC12",
4    info: "#3090FF",
5    success: "#72C51B",
6  }

Configuration object for notification

key	value	Options
title	String	" "
message	String	" "
type	String	possible options: info, success, error, success
timeout	Number	default: 5000
OnClose	function	function when notification is removed