useOrganization

Access attributes of the currently active organization.

Overview

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

const useOrganizationParams = { 
  invitationList: { limit, offset }, // Pagination params
  membershipList: { limit, offset }  // Pagination params
};

const { 
  isLoaded,
  organization,
  invitationList,
  membershipList,
  membership,
} = useOrganization(useOrganizationParams);

These attributes are updating 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. No need for you to manage updating anything manually.

Expanding `invitationList` and/or `membershipList`

To keep network usage to a minimum but to also 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.

E.g.

const { invitationList } = useOrganization();
// invitationList is undefined.

const { invitationList } = useOrganization({ 
 invitationList: {} // Add any pagination params you might need.
});
// invitationList is retrieved and auto-updating as expected.

Usage

Make sure you've followed the installation guide for Clerk React before running the snippets below.

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

Note that your component must be a descendant of <ClerkProvider/>.

Showing organization list informationimport { useOrganization } from "@clerk/nextjs";

export default function MemberList() {
  const { membershipList, membership } = 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 utilising the hook and the organizations feature, take a 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`