Skip to main content
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

HookPurpose
useCreateEventCreate an event (with optional inline cover/gallery).
useFetchEventFetch a single event by ID.
useFetchManyEventsOne-shot list query (low-level).
useFetchManyEventsWrapperStateful, paginated list with sort + load-more.
useUpdateEventEdit an event; replace cover, append/remove gallery images.
useDeleteEventDelete an event.
useCancelEventCancel an event.
useSetRsvpSet/change an RSVP.
useWithdrawRsvpWithdraw an RSVP.
useAddHost / useRemoveHostManage hosts.
useAddInvite / useRemoveInviteManage invites.
useFetchInviteesHost-only invitee list.
useFetchEventRsvpsNamed guest list.
EventProvider / useEventLoad 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