Feedback

Message

Lightweight flash notifications that appear at the top center of the page — no layout disruption. Useful for brief confirmations, errors, and loading states. Works via an imperative message API or the MessageProvider component.

Installation

npx benflux-ui add message

Setup — MessageProvider

Wrap your app (or layout) with MessageProvider so messages render inside your React tree (SSR-friendly). Without it, messages are appended to document.body via a portal.

// app/layout.tsx
import { MessageProvider } from "@benflux-ui/react"

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <MessageProvider>{children}</MessageProvider>
      </body>
    </html>
  )
}

Advanced config

// Custom duration and key (prevents duplicates)
message.info({
  content: "Processing request...",
  duration: 6,       // seconds (0 = never auto-close)
  key: "upload",     // reuse the same slot
  onClose: () => console.log("dismissed"),
})

// Destroy all messages
message.destroy()

API — message

Prop	Type	Default	Description
message.success(content, duration?)	() => void	—	Show a success message. Returns a function to close it early.
message.error(content, duration?)	() => void	—	Show an error message
message.warning(content, duration?)	() => void	—	Show a warning message
message.info(content, duration?)	() => void	—	Show an info message
message.loading(content, duration?)	() => void	—	Show a loading message with a spinner
message.destroy()	void	—	Remove all currently visible messages

MessageConfig

interface MessageConfig {
  content: ReactNode    // Message text or element
  duration?: number     // Auto-close delay in seconds (default: 3, 0 = sticky)
  key?: string          // Unique key to prevent duplicate messages
  icon?: ReactNode      // Override the default type icon
  onClose?: () => void  // Called when the message is dismissed
}