useOrganizationList

Access methods for switching between active organizations and for listing available organizations and memberships.

Overview

The useOrganizationList hook gives you access to the list of available Organizations and OrganizationMemberships the user belongs to.

Additionally by using the setActive method you can set an organization as the active one and access its capabilities through the useOrganization hook.

[
 { 
   organization: Organization,
   membership: OrganizationMembership
 },
 ...
]

const { 
  isLoaded,
  organizationList,
  createOrganization,
  setActive
} = useOrganizationList();

The organizationList attribute is an array of objects consisted of the Organization and OrganizationMembership of each entry:

Usage

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

In the following example, useOrganizationList is used to map over the list of organizations and memberships to show some basic information for the entities.

Additionally by clicking the link on each list entry, you can set the target organization as the active one.

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

Showing organization list informationimport { useOrganizationList } from "@clerk/nextjs";
import Link from "next/link";

const OrganizationList = () => {
  const { organizationList, isLoaded, setActive } = useOrganizationList();
  
  if (!isLoaded) {
    // show loading state
    return null;
  }

  return (
    <div>
      <h2>Your organizations</h2>
      {organizationList.length === 0 ? (
        <div>You do not belong to any organizations yet.</div>
      ) : (
        <ul>
          {organizationList.map(({ organization, membership }) => (
            <li key={organization.id}>
              <p>Name: {organization.name}</p>
              <p>Your role: {membership.role}</p>
              <button onClick={() => setActive(organization.id)}>Make active</button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default OrganizationList;

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