React Usage

@notifi/react provides a headless notification adapter for React applications.

Register NotifContainer

Add the NotifContainer once in your layout or root component:

import { NotifContainer } from '@notifi/react'
import '@notifi/core/style.css'

export default function App() {
  return (
    <div>
      <NotifContainer position="bottom-end" visibleNotifications={3} />
    </div>
  )
}

Create a notification

import { notif } from '@notifi/react'

// Basic text or custom inline JSX
notif(
  <div>Hello from @notifi/react!</div>,
  {
    id: crypto.randomUUID(),
    duration: 3000,
  }
)

Clear all notifications

import { notif } from '@notifi/react'

notif.dismiss()

Custom Component Content

import React from 'react'
import { notif } from '@notifi/react'

function CustomToast({ onCloseNotification }: { onCloseNotification: () => void }) {
  return (
    <div className="toast-card">
      <p>Custom React Notification</p>
      <button onClick={onCloseNotification}>Close</button>
    </div>
  )
}

notif(CustomToast, { duration: 4000 })