signoz/frontend/src/hooks/useNotifications.tsx
GitStart 7998d474e2
FE: Create a single instance of notification in form of Context Provider and use it across whole app (#2196)
* feat: create notification context provider

* chore: import is updated to absolute import

---------

Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: Palash <palashgdev@gmail.com>
2023-02-12 08:53:00 +05:30

44 lines
1.0 KiB
TypeScript

import { notification } from 'antd';
import { NotificationInstance } from 'antd/es/notification/interface';
import React, { createContext, useContext, useMemo } from 'react';
type Notification = {
notifications: NotificationInstance;
};
const defaultNotification: Notification = {
notifications: {
success: (): void => {},
error: (): void => {},
info: (): void => {},
warning: (): void => {},
open: (): void => {},
destroy: (): void => {},
},
};
export const NotificationContext = createContext<Notification>(
defaultNotification,
);
export function NotificationProvider({
children,
}: {
children: JSX.Element;
}): JSX.Element {
const [notificationApi, NotificationElement] = notification.useNotification();
const notifications = useMemo(() => ({ notifications: notificationApi }), [
notificationApi,
]);
return (
<NotificationContext.Provider value={notifications}>
{NotificationElement}
{children}
</NotificationContext.Provider>
);
}
export const useNotifications = (): Notification =>
useContext(NotificationContext);