@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
23 lines • 1.36 kB
JavaScript
import React from 'react';
import { useMagicBellContext } from '../../context/MagicBellContext.js';
import NotificationInbox from '../NotificationInbox/index.js';
import FloatingInboxContainer from './FloatingInboxContainer.js';
/**
* Notification inbox in a popover.
*
* @example
* <FloatingNotificationInbox height={400} toggle={() => void} isOpen />
*/
export default function FloatingNotificationInbox({ launcherRef, isOpen, toggle, placement, offset, arrowPadding, width = 500, onNotificationClick, closeOnClickOutside = true, closeOnNotificationClick = true, hideArrow = false, layout, ...inboxProps }) {
const handleNotificationClick = (notification) => {
if (closeOnNotificationClick)
toggle?.();
return onNotificationClick?.(notification);
};
const { isFetchingConfig } = useMagicBellContext();
if (isFetchingConfig)
return null;
return (React.createElement(FloatingInboxContainer, { launcherRef: launcherRef, isOpen: isOpen, toggle: toggle, placement: placement, offset: offset, arrowPadding: arrowPadding, width: width, closeOnClickOutside: closeOnClickOutside, hideArrow: hideArrow, layout: layout },
React.createElement(NotificationInbox, { onNotificationClick: handleNotificationClick, layout: layout, ...inboxProps })));
}
//# sourceMappingURL=FloatingNotificationInbox.js.map