import React from 'react'; import { createPortal } from 'react-dom'; import invariant from 'tiny-invariant'; export function FlashMessage({ message, level, sticky, fixed }: { message: string; level: string; sticky?: boolean; fixed?: boolean; }) { const element = document.getElementById('flash_messages'); invariant(element, 'Flash messages root element not found'); return createPortal(
{message}
, element ); } function flashClassName(level: string, sticky = false, fixed = false) { const className = level == 'notice' ? ['alert', 'alert-success'] : ['alert', 'alert-danger']; if (sticky) { className.push('sticky'); } if (fixed) { className.push('alert-fixed'); } return className.join(' '); } function roleName(level: string) { return level == 'notice' ? 'status' : 'alert'; }