useOrganization()

Access attributes of the currently active organization.

Overview

The useOrganization hook gives you access to the current active organization attributes.

1
import {useOrganization} from "@clerk/nextjs"
2

3
const useOrganizationParams = { 
4
  invitationList: { limit, offset }, // Pagination params
5
  membershipList: { limit, offset }  // Pagination params
6
};
7

8
const { 
9
  isLoaded,
10
  organization,
11
  invitationList,
12
  membershipList,
13
  membership,
14
} = useOrganization(useOrganizationParams);

These attributes are updated automatically and will re-render their respective components whenever you set a different organization using the setActive({ organization }) method or update any of the memberships or invitations.

Expanding `invitationList` and/or `membershipList`

To keep network usage to a minimum but also to provide a smooth auto-updating experience to developers, we made the invitationList and membershipList attributes being available only when their respective parameters are present when calling the hook.

1
const { invitationList } = useOrganization();
2

3
// returns undefined
4
console.log(invitationList)
5

6
const { invitationList } = useOrganization({ 
7
 invitationList: {} 
8
});
9
// invitationList is retrieved and auto-updating as expected.

Usage

In the following example, useOrganization is used to map over the membershipList of the current active organization and present membership attributes.

import { useOrganization } from "@clerk/nextjs";

export default function MemberList() {
  const { membershipList} = useOrganization({
    membershipList: {},
  });

  if (!membershipList) {
    // loading state
    return null;
  }
  
  return (
    <div>
      <h2>Organization members</h2>
      <ul>
        {membershipList?.map((membership) => (
          <li key={membership.id}>
            {membership.publicUserData.firstName} 
            {membership.publicUserData.lastName} &lt;
            {membership.publicUserData.identifier}
            &gt; :: {membership.role}
          </li>
        ))}
      </ul>
    </div>
  );
}

To see a demo application utilizing the hook and the organizations feature, look at our organizations demo repository.

useOrganization()

Access attributes of the currently active organization.

Expanding invitationList and/or membershipList

Usage

Expanding `invitationList` and/or `membershipList`