<CreateOrganization />
component
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 | Type | Description |
---|---|---|
appearance | Appearance | undefined | Optional object to style your components. Will only affect Clerk Components and not Account Portal pages. |
afterCreateOrganizationUrl | string | Full URL or path to navigate to after creating a new organization. |
routing | 'hash' | 'path' | 'virtual' | The routing strategy for your pages. |
path | string | 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. |
skipInvitationScreen | boolean | Hides the screen for sending invitations after an organization is created. When left undefined, Clerk will automatically hide the screen if the number of max allowed members is equal to 1 |
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.tsximport { CreateOrganization } from "@clerk/nextjs"; export default function CreateOrganizationPage() { return <CreateOrganization path="/create-organization" />; }
/pages/create-organization/[[...index]].tsximport { CreateOrganization } from "@clerk/nextjs"; export default function CreateOrganizationPage() { return ( <CreateOrganization path="/create-organization" /> ) }
/create-organization.tsximport { CreateOrganization } from "@clerk/clerk-react"; export default function CreateOrganizationPage() { return <CreateOrganization path="/create-organization" />; }
/route/create-organization/$.tsximport { CreateOrganization } from "@clerk/remix"; export default function CreateOrganizationPage() { return <CreateOrganization path="/create-organization" />; }
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 | Type | Description |
---|---|---|
node | HTMLDivElement (opens in a new tab) | The <div> element used to render in the <CreateOrganization /> component |
props? | CreateOrganizationProps | The properties to pass to the <CreateOrganization /> component |
mountCreateOrganization()
usage
main.jsimport 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="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="{{pub_key}}" src="https://{{fapi_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 | Type | Description |
---|---|---|
node | HTMLDivElement (opens in a new tab) | The container <div> element with a rendered <CreateOrganization /> component instance |
unmountCreateOrganization()
usage
main.jsimport 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="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="{{pub_key}}" src="https://{{fapi_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
Name | Type | Description |
---|---|---|
props? | CreateOrganizationProps | The properties to pass to the <CreateOrganization /> component |
openCreateOrganization()
usage
main.jsimport 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="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="{{pub_key}}" src="https://{{fapi_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.jsimport 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="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="{{pub_key}}" src="https://{{fapi_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.
Last updated on March 26, 2024