`<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>

Properties


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>

Properties


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`	`Appearance \| undefined`	Optional object to style your components. Will only affect Clerk Components and not Account Portal pages.
`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 />` component.
`organizationProfileProps`	`object`	Specify options for the underlying `<OrganizationProfile />` component. e.g. `{appearance: {...}}`

Last updated on November 21, 2023