Saltar al contenido principal

<EventHeader>

Optional drop-in for the event's display metadata: title, dates, location, organizer. Reads from useConfig() and renders nothing until config loads. Default layout stacks the metadata into iconified rows so each piece reads as a distinct affordance.

Import​

import { EventHeader } from "@feelrift/react";

Basic usage​

import { EventHeader, RiftEvent, RiftProvider } from "@feelrift/react";

<RiftProvider>
  <RiftEvent eventId="evt_summerfest_2026">
    <EventHeader />
  </RiftEvent>
</RiftProvider>;

Props​

Accepts all HTMLAttributes<HTMLElement> plus:

NameTypeRequiredDefaultDescription
asChildbooleanNofalseSwap the root element via Radix Slot. When true, the immediate child becomes root.
headingLevel1 | 2 | 3 | 4 | 5 | 6No2Heading level for the event name. Set 1 when the header is the page's primary heading; default 2 fits a typical section.
childrenReactNodeNo—Replace the default rendering. Composed inside the <header> (or slot root) wrapper.
classNamestringNo—Appended to the SDK's rift-event-header class.
…restHTMLAttributes<HTMLElement>No—Forwarded to the root element.

headingLevel​

Picks which heading tag the event name renders into. Match the level to the page outline:

// Header is the page's primary H1
<EventHeader headingLevel={1} />

// Header is a section inside a larger page (default)
<EventHeader />

// Header is nested deep — e.g. inside a card on a listings page
<EventHeader headingLevel={3} />

asChild​

When true, the component delegates rendering to its immediate child via Radix Slot — keeping the className composition and the data binding but using your element. Useful for swapping the root element type or for integrating with a UI library's primitives.

<EventHeader asChild>
  <section data-section="hero" />
</EventHeader>

children​

When supplied, replace the default rendering. The element still wraps in <header> (or the slot root) so the SDK's class composition holds.

For data access without re-implementing layout, call useConfig directly and render whatever you want:

import { useConfig } from "@feelrift/react";

function MyHeader() {
  const { data } = useConfig();
  if (!data) return null;
  return <h1>{data.event.name}</h1>;
}

Render output​

Default rendering:

<header class="rift-event-header">
  <h2 class="rift-event-header__name">{event.name}</h2>
  <dl class="rift-event-header__meta">
    <div class="rift-event-header__meta-row">
      <span class="rift-event-header__meta-icon"><svg /></span>
      <dt class="rift-event-header__meta-label">When</dt>
      <dd class="rift-event-header__meta-value">
        {Sat, May 23 · 6 PM — Mon, May 25 · 6 PM}
      </dd>
    </div>
    <div class="rift-event-header__meta-row">
      <span class="rift-event-header__meta-icon"><svg /></span>
      <dt class="rift-event-header__meta-label">Where</dt>
      <dd class="rift-event-header__meta-value">{event.location}</dd>
    </div>
    <div class="rift-event-header__meta-row">
      <span class="rift-event-header__meta-icon"><svg /></span>
      <dt class="rift-event-header__meta-label">Organizer</dt>
      <dd class="rift-event-header__meta-value">
        Hosted by {event.organizationName}
      </dd>
    </div>
  </dl>
</header>
  • The date range uses useLocale().formatEventDateRange with event.timeZone — see below for the produced shapes.
  • location row is omitted when the organizer hasn't set one.
  • Inline SVG icons (calendar / map-pin / user) use currentColor so they inherit row text color. Labels (<dt>) are visually-hidden but available to screen readers; the icon carries the affordance for sighted users.

Date range format​

formatEventDateRange (exposed via useLocale()) produces labels in the event timezone from config by default. You can also pass a timezone explicitly: formatEventDateRange(startIso, endIso, "America/Mexico_City").

RangeOutput (en-US)
Same daySat, May 23 · 6 PM — 11 PM
Multi-daySat, May 23 · 6 PM — Mon, May 25 · 6 PM

Hours drop :00 when the time falls on a whole hour (6 PM, not 6:00 PM). Year is hidden when both endpoints fall in the current year; shown when either crosses into a different year. Locale drives the AM/PM style (PM en-US vs p. m. es-MX vs 24h for de-DE).

Behavior​

  • Data source. Reads from useConfig(), which manages the fetch and caching for GET /api/v1/events/{eventId}/config.
  • Cached first paint. After <RiftProvider> rehydrates on mount, a previously-fetched config paints immediately while a background refetch picks up server-side changes.
  • No fallback DOM. Returns null while loading. Wrap in a parent layout slot if you need a skeleton.
  • CSS scoping. Built-in styles are scoped to .rift-event-header — the consumer can override every visual via external CSS without !important.

Examples​

Override the root element type​

<EventHeader asChild>
  <section className="hero" />
</EventHeader>

Custom layout, default data​

<EventHeader>
  <h1>{useConfig().data?.event.name}</h1>
  <p>By {useConfig().data?.event.organizationName}</p>
</EventHeader>

For most cases, call useConfig() once at the parent level and pass values down to a fully custom header — <EventHeader> is optional.

  • useConfig — the underlying hook. Public types exported from @feelrift/react.
  • <RiftEvent> — must wrap this component.