v5 javascript updates (#627)

clerk · Apr 22, 2024 · fee3cd4 · fee3cd4
1 parent 847c47a
commit fee3cd4
Showing 1 changed file with 250 additions and 0 deletions.
diff --git a/docs/references/javascript/clerk/create-organization.mdx b/docs/references/javascript/clerk/create-organization.mdx
@@ -0,0 +1,250 @@
+---
+title: <CreateOrganization /> component
+description: The `<CreateOrganization />` component is used to render an organization creation UI that allows users to create brand new organizations within your application.
+---
+
+# `<CreateOrganization />` component
+
+<Images alt="Create Organization Example" width={992} height={568} src="/docs/images/ui-components/component-org_create.svg" />
+
+The [`<CreateOrganization />`][createorg-ref] component is used to render an organization creation UI that allows users to create brand new organizations within your application.
+
+## `mountCreateOrganization()`
+
+Render the [`<CreateOrganization />`][createorg-ref] component to an HTML `<div>` element.
+
+```typescript
+function mountCreateOrganization(node: HTMLDivElement, props?: CreateOrganizationProps): void;
+```
+
+### `mountCreateOrganization()` params
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `node` | [`HTMLDivElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement) | The `<div>` element used to render in the [`<CreateOrganization />`][createorg-ref] component |
+| `props?` | [`CreateOrganizationProps`](#create-organization-props) | The properties to pass to the [`<CreateOrganization />`][createorg-ref] component |
+
+### `mountCreateOrganization()` usage
+
+<CodeBlockTabs type="npm-script" options={['NPM Module', 'window.Clerk']}>
+  ```typescript {15-19}
+  import Clerk from '@clerk/clerk-js';
+  import { dark } from "@clerk/themes";
+
+  document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
+    <div
+      id="create-organization"
+    ></div>
+  `;
+
+  const createOrganizationComponent = document.querySelector<HTMLDivElement>('#create-organization')!;
+
+  const clerk = new Clerk('pk_[publishable_key]');
+  await clerk.load();
+
+  clerk.mountCreateOrganization(createOrganizationComponent, {
+    appearance: {
+      baseTheme: dark
+    }
+  });
+  ```
+
+  ```html {13-17}
+  <div id="create-organization"></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 createOrganizationComponent = document.querySelector('#create-organization');
+
+      window.Clerk.mountCreateOrganization(createOrganizationComponent, {
+        appearance: {
+          baseTheme: dark
+        }
+      });
+    });
+    document.body.appendChild(script);
+  </script>
+  ```
+</CodeBlockTabs>
+
+## `unmountCreateOrganization`
+
+Unmount and run cleanup on an existing [`<CreateOrganization />`][createorg-ref] component instance.
+
+```typescript
+function unmountCreateOrganization(node: HTMLDivElement): void;
+```
+
+### `unmountCreateOrganization` params
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `node` | [`HTMLDivElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement) | The container `<div>` element with a rendered [`<CreateOrganization />`][createorg-ref] component instance |
+
+### `unmountCreateOrganization` usage
+
+<CodeBlockTabs type="npm-script" options={['NPM Module', 'window.Clerk']}>
+  ```typescript {19}
+  import Clerk from '@clerk/clerk-js';
+
+  document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
+    <div
+      id="create-organization"
+    ></div>
+  `
+
+  const createOrganizationComponent = document.querySelector<HTMLDivElement>('#create-organization')!;
+
+  const clerk = new Clerk('pk_[publishable_key]');
+
+  await clerk.load();
+
+  clerk.mountCreateOrganization(createOrganizationComponent);
+
+  // ...
+
+  clerk.unmountCreateOrganization(createOrganizationComponent);
+  ```
+
+  ```html {17}
+  <div id="create-organization"></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 createOrganizationComponent = document.querySelector('#create-organization');
+
+      window.Clerk.mountCreateOrganization(createOrganizationComponent);
+
+      // ...
+
+      window.Clerk.unmountCreateOrganization(createOrganizationComponent);
+    });
+    document.body.appendChild(script);
+  </script>
+  ```
+</CodeBlockTabs>
+
+## `openCreateOrganization`
+
+Opens the [`<CreateOrganization />`][createorg-ref] component as an overlay at the root of your HTML `body` element.
+
+```typescript
+function openCreateOrganization(props?: CreateOrganizationProps): void;
+```
+
+### `openCreateOrganization` params
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `props?` | [`CreateOrganizationProps`](#create-organization-props) | The properties to pass to the [`<CreateOrganization />`][createorg-ref] component |
+
+### `openCreateOrganization` usage
+
+<CodeBlockTabs type="npm-script" options={['NPM Module', 'window.Clerk']}>
+  ```typescript {7-11}
+  import Clerk from '@clerk/clerk-js';
+  import { dark } from "@clerk/themes";
+
+  const clerk = new Clerk('pk_[publishable_key]');
+  await clerk.load();
+
+  clerk.openCreateOrganization({
+    appearance: {
+      baseTheme: dark
+    }
+  });
+  ```
+
+  ```html {10-14}
+  <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();
+
+      window.Clerk.openCreateOrganization({
+        appearance: {
+          baseTheme: dark
+        }
+      });
+    });
+    document.body.appendChild(script);
+  </script>
+  ```
+</CodeBlockTabs>
+
+## `closeCreateOrganization`
+
+Closes the organization profile overlay.
+
+```typescript
+function closeCreateOrganization(): void;
+```
+
+### `closeCreateOrganization` usage
+
+<CodeBlockTabs type="npm-script" options={['NPM Module', 'window.Clerk']}>
+  ```typescript {11}
+  import Clerk from '@clerk/clerk-js';
+  import { dark } from "@clerk/themes";
+
+  const clerk = new Clerk('pk_[publishable_key]');
+  await clerk.load();
+
+  clerk.openCreateOrganization();
+
+  // ...
+
+  clerk.closeCreateOrganization();
+  ```
+
+  ```html {14}
+  <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();
+
+      window.Clerk.openCreateOrganization();
+
+      // ...
+
+      window.Clerk.closeCreateOrganization();
+    });
+    document.body.appendChild(script);
+  </script>
+  ```
+</CodeBlockTabs>
+
+## `CreateOrganizationProps`
+
+All props below are optional.
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `afterCreateOrganizationUrl` | `string` | Full URL or path to navigate 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. -e.g. /create-org. This prop is ignored in hash and virtual based routing. |
+| `appearance` | <code>[Appearance](/docs/components/customization/overview) \| undefined</code> | Optional object to style your components. Will only affect [Clerk Components][components-ref] and not [Account Portal][ap-ref] pages. |
+
+[components-ref]: /docs/components/overview
+[ap-ref]: /docs/account-portal/overview
+[createorg-ref]: /docs/components/organization/create-organization