Docs

You are viewing an archived version of the docs.Go to latest version

<CreateOrganization /> component

Organization Switcher Example

The <CreateOrganization /> component is used to render an organization creation UI that allows users to create brand new organizations within your application.

Properties

All props are optional.

  • Name
    appearance
    Type
    Appearance | undefined
    Description

    Optional object to style your components. Will only affect Clerk Components and not Account Portal pages.

  • Name
    afterCreateOrganizationUrl
    Type
    string
    Description

    Full URL or path to navigate to after creating a new organization.

  • Name
    routing
    Type
    'hash' | 'path' | 'virtual'
    Description

    The routing strategy for your pages.

  • Name
    path
    Type
    string
    Description

    The path where the component is mounted when path-based routing is used.
    For example, /create-org
    This prop is ignored in hash- and virtual-based routing.

Usage with frameworks

The following example includes a basic implementation of the <CreateOrganization /> component. You can use this as a starting point for your own implementation.

/app/create-organization/[[...create-organization]]/page.tsx
import { CreateOrganization } from "@clerk/nextjs";

export default function CreateOrganizationPage() {
  return <CreateOrganization />;
}
/pages/create-organization/[[...index]].tsx
import { CreateOrganization } from "@clerk/nextjs";

export default function CreateOrganizationPage() {
  return (
      <CreateOrganization routing="path" path="/create-organization" />
  )
}
/create-organization.tsx
import { CreateOrganization } from "@clerk/clerk-react";

export default function CreateOrganizationPage() {
  return <CreateOrganization />;
}
/route/create-organization/$.tsx
import { CreateOrganization } from "@clerk/remix";

export default function CreateOrganizationPage() {
  return <CreateOrganization />;
}

Usage with JavaScript

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

The following examples assume that you have followed the quickstart in order to add Clerk to your JavaScript application.

mountCreateOrganization()

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

function mountCreateOrganization(node: HTMLDivElement, props?: CreateOrganizationProps): void;

mountCreateOrganization() params

  • Name
    node
    Type
    HTMLDivElement
    Description

    The <div> element used to render in the <CreateOrganization /> component

  • Name
    props?
    Type
    CreateOrganizationProps
    Description

    The properties to pass to the <CreateOrganization /> component

mountCreateOrganization() usage

main.js
import Clerk from '@clerk/clerk-js';

// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk('YOUR_PUBLISHABLE_KEY');
await clerk.load();

document.getElementById("app").innerHTML = `
  <div id="create-organization"></div>
`;

const createOrgDiv =
  document.getElementById("create-organization");

clerk.mountCreateOrganization(createOrgDiv);
index.html
<!-- Add a <div id="create-organization"> element to your HTML -->
<div id="create-organization"></div>

<!-- Initialize Clerk with your
Clerk Publishable key and Frontend API URL -->
<script
  async
  crossorigin="anonymous"
  data-clerk-publishable-key="YOUR_PUBLISHABLE_KEY"
  src="https://YOUR_FRONTEND_API_URL/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
  type="text/javascript"
></script>

<script>
  window.addEventListener("load", async function () {
    await Clerk.load();

    const createOrgDiv =
      document.getElementById("create-organization");

    Clerk.mountCreateOrganization(createOrgDiv);
  });
</script>

unmountCreateOrganization()

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

function unmountCreateOrganization(node: HTMLDivElement): void;

unmountCreateOrganization() params

  • Name
    node
    Type
    HTMLDivElement
    Description

    The container <div> element with a rendered <CreateOrganization /> component instance

unmountCreateOrganization() usage

main.js
import Clerk from '@clerk/clerk-js';

// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk('YOUR_PUBLISHABLE_KEY');
await clerk.load();

document.getElementById('app').innerHTML = `
  <div id="create-organization"></div>
`

const createOrgDiv =
  document.getElementById('create-organization');

clerk.mountCreateOrganization(createOrgDiv);

// ...

clerk.unmountCreateOrganization(createOrgDiv);
index.html
<!-- Add a <div id="create-organization"> element to your HTML -->
<div id="create-organization"></div>

<!-- Initialize Clerk with your
Clerk Publishable key and Frontend API URL -->
<script
  async
  crossorigin="anonymous"
  data-clerk-publishable-key="YOUR_PUBLISHABLE_KEY"
  src="https://YOUR_FRONTEND_API_URL/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
  type="text/javascript"
></script>

<script>
  window.addEventListener("load", async function () {
    await Clerk.load();

    const createOrgDiv =
      document.getElementById('create-organization');

    Clerk.mountCreateOrganization(createOrgDiv);

    // ...

    Clerk.unmountCreateOrganization(createOrgDiv);
  });
</script>

openCreateOrganization()

Opens the <CreateOrganization /> component as an overlay at the root of your HTML body element.

function openCreateOrganization(props?: CreateOrganizationProps): void;

openCreateOrganization() params

openCreateOrganization() usage

main.js
import Clerk from '@clerk/clerk-js';

// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk('YOUR_PUBLISHABLE_KEY');
await clerk.load();

document.getElementById('app').innerHTML = `
  <div id="create-organization"></div>
`

const createOrgDiv =
  document.getElementById('create-organization');

clerk.openCreateOrganization(createOrgDiv);
index.html
<!-- Add a <div id="create-organization"> element to your HTML -->
<div id="create-organization"></div>

<!-- Initialize Clerk with your
Clerk Publishable key and Frontend API URL -->
<script
  async
  crossorigin="anonymous"
  data-clerk-publishable-key="YOUR_PUBLISHABLE_KEY"
  src="https://YOUR_FRONTEND_API_URL/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
  type="text/javascript"
></script>

<script>
  window.addEventListener("load", async function () {
    await Clerk.load();

    const createOrgDiv =
      document.getElementById('create-organization');

    Clerk.openCreateOrganization(createOrgDiv);
  });
</script>

closeCreateOrganization()

Closes the organization profile overlay.

function closeCreateOrganization(): void;

closeCreateOrganization() usage

main.js
import Clerk from '@clerk/clerk-js';

// Initialize Clerk with your Clerk publishable key
const clerk = new Clerk('YOUR_PUBLISHABLE_KEY');
await clerk.load();

document.getElementById('app').innerHTML = `
  <div id="create-organization"></div>
`

const createOrgDiv =
  document.getElementById('create-organization');

clerk.openCreateOrganization(createOrgDiv);

// ...

clerk.closeCreateOrganization(createOrgDiv);
index.html
<!-- Add a <div id="create-organization"> element to your HTML -->
<div id="create-organization"></div>

<!-- Initialize Clerk with your
Clerk Publishable key and Frontend API URL -->
<script
  async
  crossorigin="anonymous"
  data-clerk-publishable-key="YOUR_PUBLISHABLE_KEY"
  src="https://YOUR_FRONTEND_API_URL/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
  type="text/javascript"
></script>

<script>
  window.addEventListener("load", async function () {
    await Clerk.load();

    const createOrgDiv =
      document.getElementById('create-organization');

    Clerk.openCreateOrganization(createOrgDiv);

    // ...

    Clerk.closeCreateOrganization(createOrgDiv);
  });
</script>

Customization

To learn about how to customize Clerk components, see the customization documentation.

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on