Skip to main content
The useOrganizationMemberships() hook provides direct access to the current user’s organization membership data.

​
Import

import { useOrganizationMemberships } from '@snipextt/wacht';

​
Usage

import { useOrganizationMemberships } from '@snipextt/wacht';

function MembershipList() {
  const { organizationMemberships, loading, refetch } = useOrganizationMemberships();

  if (loading) {
    return <div>Loading memberships...</div>;
  }

  return (
    <div>
      <h2>Your Organization Memberships</h2>
      {organizationMemberships?.map(membership => (
        <div key={membership.id}>
          <h3>{membership.organization.name}</h3>
          <p>Role: {membership.role.name}</p>
          <p>Joined: {new Date(membership.created_at).toLocaleDateString()}</p>
        </div>
      ))}
      <button onClick={refetch}>Refresh</button>
    </div>
  );
}

​
Properties

​
organizationMemberships
OrganizationMembershipWithOrganization[]
Array of organization membership objects containing the organization details and user’s role
​
loading
boolean
Whether membership data is being loaded
​
error
Error | null
Any error that occurred while loading memberships

​
Methods

​
refetch()

Manually refreshes the organization membership data. 
const { refetch } = useOrganizationMemberships();

await refetch();

​
Types

​
OrganizationMembershipWithOrganization

interface OrganizationMembershipWithOrganization {
  id: string;
  organization: Organization;
  role: OrganizationRole;
  user: User;
  created_at: string;
  updated_at: string;
}

interface Organization {
  id: string;
  name: string;
  description?: string;
  image_url?: string;
  created_at: string;
  updated_at: string;
}

interface OrganizationRole {
  id: string;
  name: string;
  permissions: string[];
}

​
Example: Organization Switcher

function OrganizationSwitcher() {
  const { organizationMemberships, loading } = useOrganizationMemberships();
  const { activeOrganization } = useActiveOrganization();
  const { switchOrganization } = useSession();

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <select 
      value={activeOrganization?.id || ''}
      onChange={(e) => switchOrganization(e.target.value)}
    >
      <option value="">Personal Workspace</option>
      {organizationMemberships?.map(membership => (
        <option key={membership.id} value={membership.organization.id}>
          {membership.organization.name}
        </option>
      ))}
    </select>
  );
}

​
Example: Membership Details View

function MembershipDetails() {
  const { organizationMemberships, loading, refetch } = useOrganizationMemberships();
  const [selectedMembership, setSelectedMembership] = useState(null);

  if (loading) {
    return <div>Loading memberships...</div>;
  }

  return (
    <div className="membership-manager">
      <div className="membership-list">
        <h2>Your Organizations</h2>
        {organizationMemberships?.map(membership => (
          <div 
            key={membership.id}
            className={`membership-card ${selectedMembership?.id === membership.id ? 'selected' : ''}`}
            onClick={() => setSelectedMembership(membership)}
          >
            <h3>{membership.organization.name}</h3>
            <span className="role-badge">{membership.role.name}</span>
          </div>
        ))}
      </div>

      {selectedMembership && (
        <div className="membership-details">
          <h2>Membership Details</h2>
          <dl>
            <dt>Organization</dt>
            <dd>{selectedMembership.organization.name}</dd>
            
            <dt>Role</dt>
            <dd>{selectedMembership.role.name}</dd>
            
            <dt>Permissions</dt>
            <dd>
              <ul>
                {selectedMembership.role.permissions.map(permission => (
                  <li key={permission}>{permission}</li>
                ))}
              </ul>
            </dd>
            
            <dt>Member Since</dt>
            <dd>{new Date(selectedMembership.created_at).toLocaleDateString()}</dd>
          </dl>
        </div>
      )}

      <button onClick={refetch} className="refresh-button">
        Refresh Memberships
      </button>
    </div>
  );
}

​
Example: Permission Check

function PermissionGate({ permission, children }) {
  const { organizationMemberships } = useOrganizationMemberships();
  const { activeOrganization } = useActiveOrganization();

  const hasPermission = useMemo(() => {
    if (!activeOrganization || !organizationMemberships) return false;

    const membership = organizationMemberships.find(
      m => m.organization.id === activeOrganization.id
    );

    return membership?.role.permissions.includes(permission) || false;
  }, [organizationMemberships, activeOrganization, permission]);

  if (!hasPermission) {
    return <div>You don't have permission to view this content.</div>;
  }

  return children;
}

// Usage
<PermissionGate permission="admin">
  <AdminPanel />
</PermissionGate>

​
Notes

  • This hook provides read-only access to membership data
  • Memberships are automatically refreshed every 30 seconds
  • The data includes full organization and role information
  • Use this hook when you need to display all organizations a user belongs to
  • For operations on a specific organization, use useActiveOrganization() or useOrganizationList()