`<OrganizationSwitcher />` Component

The <OrganizationSwitcher /> component is used to enable the ability to switch between available organizations the user may be part of in your application.

`mountOrganizationSwitcher()`

Render the <OrganizationSwitcher /> component to an HTML <div> element.

Usage

import Clerk from '@clerk/clerk-js';
import { dark } from "@clerk/themes";
 
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div
    id="organization-switcher"
  ></div>
`;
 
const organizationSwitcherComponent = document.querySelector<HTMLDivElement>('#organization-switcher')!;
 
const clerk = new Clerk('pk_[publishable_key]');
await clerk.load();
 
clerk.mountOrganizationSwitcher(organizationSwitcherComponent, {
  appearance: {
    baseTheme: dark
  }
});

<div id="organization-switcher"></div>
<script>
  const script = document.createElement('script');
  script.setAttribute('data-clerk-publishable-key', 'pk_[publishable_key]');
  script.async = true;
  script.src = `https://[your-domain].clerk.accounts.dev/npm/@clerk/clerk-js@latest/dist/clerk.browser.js`;
 
  script.addEventListener('load', async function () {
    await window.Clerk.load();
 
    const organizationSwitcherComponent = document.querySelector('#organization-switcher');
 
    window.Clerk.mountOrganizationSwitcher(organizationSwitcherComponent, {
      appearance: {
        baseTheme: dark
      }
    });
  });
  document.body.appendChild(script);
</script>

Props

function mountOrganizationSwitcher(node: HTMLDivElement, props?: OrganizationSwitcherProps): void;

Name	Type	Description
node	`HTMLDivElement`	The `<div>` element used to render in the <OrganizationSwitcher /> component
props?	`OrganizationSwitcherProps`	The properties to pass to the `<OrganizationSwitcher />` component

`unmountOrganizationSwitcher()`

Unmount and run cleanup on an existing <OrganizationSwitcher /> component instance.

Usage

import Clerk from '@clerk/clerk-js';
 
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div
    id="organization-switcher"
  ></div>
`
 
const organizationSwitcherComponent = document.querySelector<HTMLDivElement>('#organization-switcher')!;
 
const clerk = new Clerk('pk_[publishable_key]');
 
await clerk.load();
 
clerk.mountOrganizationSwitcher(organizationSwitcherComponent);
 
// ...
 
clerk.unmountOrganizationSwitcher(organizationSwitcherComponent);

<div id="organization-switcher"></div>
<script>
  const script = document.createElement('script');
  script.setAttribute('data-clerk-publishable-key', 'pk_[publishable_key]');
  script.async = true;
  script.src = `https://[your-domain].clerk.accounts.dev/npm/@clerk/clerk-js@latest/dist/clerk.browser.js`;
 
  script.addEventListener('load', async function () {
    await window.Clerk.load();
 
    const organizationSwitcherComponent = document.querySelector('#organization-switcher');
 
    window.Clerk.mountOrganizationSwitcher(organizationSwitcherComponent);
 
    // ...
 
    window.Clerk.unmountOrganizationSwitcher(organizationSwitcherComponent);
  });
  document.body.appendChild(script);
</script>

Props

function unmountOrganizationSwitcher(node: HTMLDivElement): void;

Name	Type	Description
node	`HTMLDivElement`	The container `<div>` element with a rendered <OrganizationSwitcher /> component instance

`OrganizationSwitcherProps`

All props below are optional.

Name	Type	Description
`afterCreateOrganizationUrl`	`string`	Full URL or path to navigate after creating a new organization.
`appearance`	`object`	Control the look and feel of the component.
`createOrganizationUrl`	`string`	Full URL or path where the <CreateOrganization /> component is mounted.
`organizationProfileUrl`	`string`	Full URL or path where the <OrganizationProfile /> component is mounted.
`createOrganizationMode`	`'modal' \| 'navigation'`	Controls whether clicking the "Create organization" button will cause the <CreateOrganization /> component to open as a modal, or if the browser will navigate to the `createOrganizationUrl` where <CreateOrganization /> is mounted as a page. Defaults to: `"modal"`
`organizationProfileMode`	`'modal' \| 'navigation'`	Controls whether clicking the "Manage organization" button will cause the <OrganizationProfile /> component to open as a modal, or if the browser will navigate to the `organizationProfileUrl` where <OrganizationProfile /> is mounted as a page. Defaults to: `"modal"`
`afterLeaveOrganizationUrl`	`string`	Full URL or path to navigate to after the user leaves the currently active organization.
`afterSwitchOrganizationUrl`	`string`	Full URL or path to navigate after a successful organization switch.
`hidePersonal`	`boolean`	By default, users can switch between organization and their personal account. This option controls whether <OrganizationSwitcher /> will include the user's personal account in the organization list. Setting this to `false` will hide the personal account entry, and users will only be able to switch between organizations. Defaults to: `true`
`defaultOpen`	`boolean`	Controls the default state of the <OrganizationSwitcher />