useDismiss

Controls dismissal state for dismissible UI, keeps it in memory by default, and can persist it for the current browser session.

Usage

import { useDismiss } from '@volvo-cars/react-utils';

function DeliveryUpdate() {
  const { visible, dismiss } = useDismiss({
    key: 'delivery-update',
  });

  if (!visible) {
    return null;
  }

  return (
    <section aria-live="polite">
      <h2>Delivery update</h2>
      <p>Current delivery times are longer than usual.</p>
      <button type="button" onClick={dismiss}>
        Dismiss message
      </button>
    </section>
  );
}

Persistence

By default, the dismissal stays in memory for the current path until the page reloads. Use persist to keep the dismissal on the current path for the current browser session, or pass path to share the dismissal across routes that use the same path scope string:

useDismiss({ key: 'delivery-update', persist: true });
useDismiss({
  key: 'delivery-update',
  path: '/:market/cars/xc90',
  persist: true,
});

Server-rendered apps

If your app can read the request cookie on the server, pass initialDismissed so the first render starts from that server-derived state. The hook exports DISMISS_COOKIE_NAME for that lookup. When persist is enabled, the cookie is stored at / and its value uses URLSearchParams, with the dismissal key as the parameter name and the configured path scope as the value. A cookie with two dismissals for the same key can look like delivery-update=%2Foffers&delivery-update=%2F%3Amarket%2Fcars%2Fxc90.

import { DISMISS_COOKIE_NAME, useDismiss } from '@volvo-cars/react-utils';

const dismissKey = 'delivery-update';
const dismissPath = '/:market/cars/xc90';

function DeliveryUpdate({ initialDismissed }: { initialDismissed?: boolean }) {
  const { visible, dismiss } = useDismiss({
    key: dismissKey,
    path: dismissPath,
    persist: true,
    initialDismissed,
  });

  if (!visible) {
    return null;
  }

  return (
    <section aria-live="polite">
      <h2>Delivery update</h2>
      <p>Current delivery times are longer than usual.</p>
      <button type="button" onClick={dismiss}>
        Dismiss message
      </button>
    </section>
  );
}

const cookieValue = requestCookies.get(DISMISS_COOKIE_NAME)?.value;
const initialDismissed = new URLSearchParams(cookieValue)
  .getAll(dismissKey)
  .includes(dismissPath);

<DeliveryUpdate initialDismissed={initialDismissed} />;

API

useDismiss accepts an options object with the following properties:

• key – stable key for this dismissal on the current path (required)
• initialDismissed – optional boolean for seeding the first render before client-side checks, especially when persist is true
• path – optional path scope string used for storage and lookup; defaults to the current pathname
• persist – optional boolean for session CookieStore persistence

The hook returns an object with:

• visible – whether the dismissible UI should be rendered
• dismiss() – hides the UI and stores the dismissal

The module also exports:

• DISMISS_COOKIE_NAME – the cookie name to read when deriving initialDismissed on the server

Behavior

• If persist is omitted, the dismissal stays in memory for the configured path scope until the page reloads
• initialDismissed seeds the first render before the in-memory or cookie state has been checked
• If persist is true, the dismissal is stored in a session cookie and scoped to the configured path value
• Pass the same path string on multiple routes to share a dismissal across them
• Use a different key for each independently dismissible UI within the same path scope
• Persisted dismissals are written with SameSite=Strict
• If CookieStore is unavailable, the hook falls back to the in-memory behavior