Organization switching

The useOrganizationList() hook returns the organizationList property, which is useful for viewing all the organizations the current user is a member of and also for building an organization switcher component.

Usage

This example shows how you can build an organization switcher in a Next.js application.

components/OrganizationSwitcher.js
import { useOrganization, useOrganizationList } from '@clerk/nextjs';
import Select from 'react-select';
 
function createOrganizationOptions(organizationList) {
  return organizationList.map(({ organization }) => ({
    value: organization.id,
    label: organization.name
  }));
}
 
export default function Switcher() {
  const { setActive, organizationList, isLoaded } = useOrganizationList();
  const { organization } = useOrganization();
 
  if (!isLoaded) {
    return null;
  }
 
  const handleOrgChange = e => {
    setActive({ organization: e.value });
  };
 
  if (!organization) {
    return null;
  }
 
  return (
    <Select
      options={createOrganizationOptions(organizationList)}
      onChange={handleOrgChange}
      value={{ value: organization.id, label: organization.name }}
    />
  );
}

Last updated on September 15, 2023