Skip to main content
EventProvider loads one event and exposes it — plus bound actions — to descendants via useEvent. It’s the simplest way to build an event detail page: the provider fetches the event (or accepts a pre-fetched one), and useEvent gives you the event state and callbacks that keep it in sync. There is no Redux store behind this — state is local to the provider. For lists, use useFetchManyEventsWrapper instead.

​
EventProvider

Identify the event by eventId, or pass a pre-fetched event object to skip the initial fetch. 
import { EventProvider } from "@sublay/react-js";

// By ID (fetches the event)
<EventProvider eventId="evt_abc123" include="user,files,userRsvp">
  <EventDetail />
</EventProvider>

// Pre-fetched object (no fetch — useful for SSR or when already loaded)
<EventProvider event={myEvent}>
  <EventDetail />
</EventProvider>

​
Props

​
eventId
string
UUID of the event to load. Use this or event.
​
event
Event
A pre-fetched event object. Skips the initial fetch. Use this or eventId.
​
include
string | string[]
Associations to expand on the fetch, e.g. "user,files,userRsvp". Only used with eventId.
EventProvider renders null if neither eventId nor a valid event is provided.

​
useEvent

Call useEvent inside a descendant of EventProvider. 
import { useEvent } from "@sublay/react-js";

function EventDetail() {
  const {
    event,
    setEvent,
    updateEvent,
    deleteEvent,
    cancelEvent,
    setRsvp,
    withdrawRsvp,
  } = useEvent();

  if (event === undefined) return <p>Loading…</p>;
  if (event === null) return <p>Event not found.</p>;

  return (
    <div>
      <h1>{event.title}</h1>
      <p>{event.rsvpCounts.going} going · your RSVP: {event.userRsvp ?? "none"}</p>
      <button onClick={() => setRsvp("going")}>Going</button>
      <button onClick={() => withdrawRsvp()}>Withdraw</button>
      <button onClick={() => cancelEvent()}>Cancel event</button>
    </div>
  );
}

​
Return Values

​
event
Event | null | undefined
The loaded event. undefined while loading, null if not found or inaccessible.
​
setEvent
React.Dispatch<SetStateAction<Event | null | undefined>>
Directly set the event state. Useful for optimistic local updates.
​
updateEvent
(props: { update }) => Promise<Event | undefined>
Update the event’s mutable fields. Host-only. Updates local state on success.
​
deleteEvent
() => Promise<void>
Delete the event. Host-only. Clears local state on success.
​
cancelEvent
() => Promise<Event | undefined>
Cancel the event (status: "cancelled"). Host-only.
​
setRsvp
(status: RsvpStatus) => Promise<Event | undefined>
Set/change the caller’s RSVP ("going" | "maybe" | "not_going"). Capacity-checked for going.
​
withdrawRsvp
() => Promise<Event | undefined>
Withdraw the caller’s RSVP.
These bound actions wrap the standalone hooks and handle errors internally (logging and returning undefined). For host/invite management (useAddHost, useAddInvite, …) and guest-list reads, use the standalone hooks alongside the provider.

​
See Also