JavaScript `<OrganizationSwitcher />`

This JavaScript reference describes the properties and methods related to Clerk's <OrganizationSwitcher /> component. If you are looking for the React component, see the <OrganizationSwitcher /> documentation.

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

The following methods available on an instance of the Clerk class are used to render and control the <OrganizationSwitcher /> component:

`mountOrganizationSwitcher()`

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


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

`mountOrganizationSwitcher()` params

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

`mountOrganizationSwitcher()` usage

main.js
import Clerk from '@clerk/clerk-js';
 
// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk('{{pub_key}}');
await clerk.load();
 
document.getElementById("app").innerHTML = `
  <div id="organization-switcher"></div>
`;
 
const orgSwitcherDiv =
  document.getElementById("organization-switcher");
 
clerk.mountOrganizationSwitcher(orgSwitcherDiv);

index.html
<!-- Add a <div id="organization-switcher"> element to your HTML -->
<div id="organization-switcher"></div>
 
<script>
  window.addEventListener("load", async function () {
    await Clerk.load();
 
    const orgSwitcherDiv =
      document.getElementById('organization-switcher');
 
    Clerk.mountOrganizationSwitcher(orgSwitcherDiv);
  });
</script>

`unmountOrganizationSwitcher()`

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


function unmountOrganizationSwitcher(node: HTMLDivElement): void;

`unmountOrganizationSwitcher()` params

Name	Type	Description
`node`	`HTMLDivElement`(opens in a new tab)	The container `<div>` element with a rendered `<OrganizationSwitcher />` component instance

`unmountOrganizationSwitcher()` usage

main.js
import Clerk from '@clerk/clerk-js';
 
// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk('{{pub_key}}');
await clerk.load();
 
document.getElementById('app').innerHTML = `
  <div id="organization-switcher"></div>
`
 
const orgSwitcherDiv =
  document.getElementById('organization-switcher');
 
clerk.mountOrganizationSwitcher(orgSwitcherDiv);
 
// ...
 
clerk.unmountOrganizationSwitcher(orgSwitcherDiv);

index.html
<!-- Add a <div id="organization-switcher"> element to your HTML -->
<div id="organization-switcher"></div>
 
<script>
  window.addEventListener("load", async function () {
    await Clerk.load();
 
    const orgSwitcherDiv =
      document.getElementById('organization-switcher');
 
    Clerk.mountOrganizationSwitcher(orgSwitcherDiv);
 
    // ...
 
    Clerk.unmountOrganizationSwitcher(orgSwitcherDiv);
  });
</script>

`OrganizationSwitcherProps`

All props below are optional.

Name	Type	Description
`afterCreateOrganizationUrl`	`string`	Full URL or path to navigate after creating a new organization.
`appearance`	`Appearance`	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. For example: `{appearance: {...}}`

mountOrganizationSwitcher()

mountOrganizationSwitcher() params

mountOrganizationSwitcher() usage

unmountOrganizationSwitcher()

unmountOrganizationSwitcher() params

unmountOrganizationSwitcher() usage

OrganizationSwitcherProps