React hook for managing organization membership, roles, and invitations with the HelloJohn React SDK.

useOrganization

The useOrganization hook provides access to the current user's active organization and methods to manage membership, roles, and invitations.

import { useOrganization } from "@hellojohn/react";

const {
  organization,
  membership,
  members,
  isLoading,
  inviteMember,
  removeMember,
  updateMemberRole,
  leaveOrganization,
} = useOrganization();

Return Value

Property	Type	Description
`organization`	`Organization \| null`	Active organization
`membership`	`Membership \| null`	Current user's membership in the active org
`members`	`Membership[]`	All members (if user has permission)
`isLoading`	`boolean`	Loading state
`inviteMember`	`function`	Invite a new member by email
`removeMember`	`function`	Remove a member
`updateMemberRole`	`function`	Change a member's role
`leaveOrganization`	`function`	Leave the active organization

Organization Object

interface Organization {
  id: string;
  name: string;
  slug: string;
  avatarUrl: string | null;
  metadata: Record<string, unknown>;
  createdAt: Date;
  memberCount: number;
}

Membership Object

interface Membership {
  id: string;
  userId: string;
  organizationId: string;
  role: "owner" | "admin" | "member";
  joinedAt: Date;
  user: {
    id: string;
    email: string;
    name: string | null;
    avatarUrl: string | null;
  };
}

Usage

Display Organization Info

import { useOrganization } from "@hellojohn/react";

function OrgHeader() {
  const { organization, membership } = useOrganization();

  if (!organization) return null;

  return (
    <div>
      <img src={organization.avatarUrl ?? ""} alt={organization.name} />
      <h2>{organization.name}</h2>
      <span>Your role: {membership?.role}</span>
    </div>
  );
}

Invite a Member

const { inviteMember } = useOrganization();

const { error } = await inviteMember({
  email: "newmember@example.com",
  role: "member",
});

inviteMember Parameters:

Parameter	Type	Required	Description
`email`	`string`	✅	Invitee email address
`role`	`"admin" \| "member"`	No	Role to assign (default: `"member"`)

Manage Members

const { members, removeMember, updateMemberRole } = useOrganization();

// Change a member's role
await updateMemberRole({
  memberId: "mem_01HABCDEF123456",
  role: "admin",
});

// Remove a member
await removeMember({ memberId: "mem_01HABCDEF123456" });

Role-Based Rendering

function AdminPanel() {
  const { membership } = useOrganization();

  // Only show for owners and admins
  if (!membership || !["owner", "admin"].includes(membership.role)) {
    return null;
  }

  return <MemberManagement />;
}

Switching Organizations

If a user belongs to multiple organizations, use useOrganizationList to switch:

import { useOrganizationList } from "@hellojohn/react";

function OrgSwitcher() {
  const { organizations, setActiveOrganization } = useOrganizationList();

  return (
    <select onChange={(e) => setActiveOrganization(e.target.value)}>
      {organizations.map((org) => (
        <option key={org.id} value={org.id}>
          {org.name}
        </option>
      ))}
    </select>
  );
}

useOrganization

On this page