Events Overview

Create, list, and manage events with the React SDK

The Events SDK exposes the full events surface as React hooks: creating and editing events (with inline cover/gallery upload), listing them with a paginated wrapper, the RSVP lifecycle, and host/invite management. Hooks authenticate as the logged-in user — the server derives who is acting from the token, so you never pass an actor userId (the only userId arguments are targets, on the host/invite hooks).

All hooks are importable from @sublay/react-js, @sublay/react-native, and @sublay/expo.

Unlike entities, events have no Redux store. State is local: load a single event with EventProvider / useEvent, and paginate lists with useFetchManyEventsWrapper.

Requires the events bundle on the project. Space-scoping needs spaces, images need files-images, and notifications need notifications.

Hooks at a glance

Hook	Purpose
useCreateEvent	Create an event (with optional inline cover/gallery).
useFetchEvent	Fetch a single event by ID.
useFetchManyEvents	One-shot list query (low-level).
useFetchManyEventsWrapper	Stateful, paginated list with sort + load-more.
useUpdateEvent	Edit an event; replace cover, append/remove gallery images.
useDeleteEvent	Delete an event.
useCancelEvent	Cancel an event.
useSetRsvp	Set/change an RSVP.
useWithdrawRsvp	Withdraw an RSVP.
useAddHost / useRemoveHost	Manage hosts.
useAddInvite / useRemoveInvite	Manage invites.
useFetchInvitees	Host-only invitee list.
useFetchEventRsvps	Named guest list.
EventProvider / useEvent	Load one event into context with bound actions.

Creating an event

useCreateEvent returns a callable. Cover and gallery uploads are inline — pass a cover and/or gallery and the hook sends multipart/form-data automatically. The logged-in user is auto-added as a host.

import { useCreateEvent } from "@sublay/react-js";

function NewEventButton() {
  const createEvent = useCreateEvent();

  const handleCreate = async (coverFile: File) => {
    const event = await createEvent({
      title: "Launch Party",
      type: "physical",
      startTime: "2026-09-01T18:00:00.000Z",
      venueName: "The Loft",
      address: "123 Main St, New York, NY",
      capacity: 100,
      cover: {
        file: coverFile,
        options: { mode: "original-aspect", sizes: { full: 1600 }, format: "webp" },
      },
    });
    console.log("Created:", event.id);
  };
}

The required location fields follow type: online needs url; physical needs address or location; hybrid needs both. See useCreateEvent for the full parameter list.

Listing events

Use useFetchManyEventsWrapper for a ready-made paginated list with sort state and loadMore. Visibility is enforced server-side, so the list only contains events the current user may see.

import { useFetchManyEventsWrapper } from "@sublay/react-js";

function UpcomingEvents() {
  const { events, loading, hasMore, loadMore, sortBy, setSortBy } =
    useFetchManyEventsWrapper({
      timeWindow: "upcoming",
      limit: 20,
      include: "userRsvp",
    });

  return (
    <div>
      <button onClick={() => setSortBy(sortBy === "startTime" ? "going" : "startTime")}>
        Sort: {sortBy}
      </button>
      {events.map((e) => (
        <article key={e.id}>
          <h3>{e.title}</h3>
          <p>{e.rsvpCounts.going} going · your RSVP: {e.userRsvp ?? "none"}</p>
        </article>
      ))}
      {hasMore && <button disabled={loading} onClick={loadMore}>Load more</button>}
    </div>
  );
}

RSVPing

import { useSetRsvp, useWithdrawRsvp } from "@sublay/react-js";

function RsvpButtons({ eventId }: { eventId: string }) {
  const setRsvp = useSetRsvp();
  const withdrawRsvp = useWithdrawRsvp();

  return (
    <div>
      <button onClick={() => setRsvp({ eventId, status: "going" })}>Going</button>
      <button onClick={() => setRsvp({ eventId, status: "maybe" })}>Maybe</button>
      <button onClick={() => withdrawRsvp({ eventId })}>Withdraw</button>
    </div>
  );
}

Both return the updated Event with refreshed rsvpCounts and the caller’s userRsvp. RSVPs close at startTime, are rejected on cancelled events, reject maybe when allowMaybe is false, and reject going at capacity.

See Also

• EventProvider & useEvent
• Event data model
• Events Hooks reference
• Events API reference