Skip to main content

​
Overview

useEvent reads the event loaded by EventProvider from context, returning the event plus bound actions (updateEvent, deleteEvent, cancelEvent, setRsvp, withdrawRsvp). useEventData is the underlying hook the provider uses — call it directly when you want the same managed state without the provider/context.

​
useEvent

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

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

  if (event === undefined) return <p>Loading…</p>;
  if (!event) return <p>Not found.</p>;

  return (
    <div>
      <h1>{event.title}</h1>
      <button onClick={() => setRsvp("going")}>Going</button>
    </div>
  );
}
useEvent returns a Partial<UseEventDataValues> (empty object outside a provider).

​
useEventData

Manage an event without the provider. Pass either a pre-fetched event or an eventId to fetch. 
import { useEventData } from "@sublay/react-js";

function EventCard({ eventId }: { eventId: string }) {
  const { event, setRsvp } = useEventData({ eventId, include: "userRsvp" });
  // ...
}

​
Parameters

​
event
Event
A pre-fetched event. Use this or eventId.
​
eventId
string
An event ID to fetch. Use this or event.
​
include
string | string[]
Associations to expand when fetching by eventId.

​
Returns (both hooks)

​
event
Event | null | undefined
The event. undefined while loading, null if not found.
​
setEvent
React.Dispatch
Set the event state directly (optimistic updates).
​
updateEvent
(props: { update }) => Promise<Event | undefined>
Update mutable fields (host-only).
​
deleteEvent
() => Promise<void>
Delete the event (host-only).
​
cancelEvent
() => Promise<Event | undefined>
Cancel the event (host-only).
​
setRsvp
(status: RsvpStatus) => Promise<Event | undefined>
Set/change the caller’s RSVP.
​
withdrawRsvp
() => Promise<Event | undefined>
Withdraw the caller’s RSVP.

​
See Also