useDismissible

Track and persist dismissed surfaces.

useDismissible manages the show/hide state of a dismissible element — an alert, chip, banner or announcement — and remembers the dismissal so it stays gone on the next visit. It's built on useLocalStorage, so it's SSR-safe and synced across tabs and components.

import { useDismissible } from '@appica/ui-react/hooks/use-dismissible'

Usage

'use client'

import { useDismissible } from '@appica/ui-react/hooks/use-dismissible'

function AnnouncementBanner() {
  const { open, dismiss } = useDismissible('announcement-2024')
  if (!open) return null

  return (
    <div className="bg-info-subtle flex items-center justify-between rounded-lg p-3">
      <span>We just shipped dark mode!</span>
      <button onClick={dismiss} aria-label="Dismiss">
        ✕
      </button>
    </div>
  )
}

Signature

useDismissible(
  key: string,
  options?: { storage?: 'local' | 'session' },
): { open: boolean; dismiss: () => void; reset: () => void }

Parameter	Type	Default	Description
`key`	`string`	—	Storage key the dismissal is persisted under
`options.storage`	`'local' \| 'session'`	`'local'`	Persist for good (`local`) or just the session

Return value

Property	Type	Description
`open`	`boolean`	Whether the surface should show (`true` until dismissed)
`dismiss`	`() => void`	Mark it dismissed and persist that
`reset`	`() => void`	Clear the dismissal so it shows again

open is true until the stored value is known, so the element renders immediately and won't pop in after hydration. Use 'session' storage for messages that should reappear in a new tab or session.

Getting Started

For AI Agents

Guides

Utilities

useDismissible

Usage

Signature

Return value