useNotification

Overview

useNotification() reads a close handler from React context, provided by the nearest enclosing <Notification>. Call it from any component composed inside that <Notification> — most commonly a labeled Button placed in actions — instead of threading a close callback down through props from wherever visible/onVisibleChange are managed.

The dismissible prop already covers dismissing via a built-in icon-only close button. Reach for useNotification() when a labeled action ("Dismiss", "Got it") in actions should close the notification instead of, or alongside, that icon.

Outside a <Notification>, useNotification() returns a no-op close rather than throwing, so a component that calls it doesn't have to guard against rendering outside one.

Basic usage

The "Dismiss" button below is a plain Button in actions that closes the notification by calling close from useNotification().

import { Button, Notification, useNotification } from '@chassis-ui/react'

const Actions = () => {
  const { close } = useNotification()
  return (
    <div className="hstack gap-sm align-items-center justify-content-end">
      <Button color="primary" size="sm">
        Take Action
      </Button>
      <Button variant="outline" size="sm" onClick={close}>
        Dismiss
      </Button>
    </div>
  )
}

export const Example = () => {
  return (
    <Notification color="primary">
      <p className="m-0">A notification dismissed by a normal button, not the close icon.</p>
      <Actions />
    </Notification>
  )
}

API

useNotification

function useNotification(): { close: () => void }

useNotification takes no arguments. Its return value is a single close function that requests the enclosing <Notification> close, running the same close transition and onClose callback as dismissing it via auto-hide or a built-in close control would.