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

---

appearance Appearance | undefined

Optional object to style your components. Will only affect OneAuxilia 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. Defaults to 'path' in Next.js and Remix applications. Defaults to hash for all other SDK's.

---

path string

The path where the component is mounted on when routing is set to path. It is ignored in hash- and virtual-based routing. For example: /create-organization.

---

skipInvitationScreen boolean

Hides the screen for sending invitations after an organization is created. When left undefined, OneAuxilia will automatically hide the screen if the number of max allowed members is equal to 1

---

hideSlug boolean

Hides the optional slug field in the organization creation screen.

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.

Next.js

App Router

/app/create-organization/[[...create-organization]]/page.tsx

import { CreateOrganization } from '@oneauxilia/nextjs'

export default function CreateOrganizationPage() {
  return <CreateOrganization path="/create-organization" />
}

Pages Router

/pages/create-organization/[[...index]].tsx

import { CreateOrganization } from '@oneauxilia/nextjs'

export default function CreateOrganizationPage() {
  return <CreateOrganization path="/create-organization" />
}

React

/create-organization.tsx

import { CreateOrganization } from '@oneauxilia/oneauxilia-react'

export default function CreateOrganizationPage() {
  return <CreateOrganization path="/create-organization" />
}

Remix

/route/create-organization/$.tsx

import { CreateOrganization } from '@oneauxilia/remix'

export default function CreateOrganizationPage() {
  return <CreateOrganization path="/create-organization" />
}

Astro

/pages/create-organization.astro

---
import { CreateOrganization } from '@oneauxilia/astro/components'
---

<CreateOrganization path="/create-organization" />

Usage with JavaScript

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

• mountCreateOrganization

• unmountCreateOrganization

• openCreateOrganization

• closeCreateOrganization

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

mountCreateOrganization()

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

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

mountCreateOrganization() params

---

node HTMLDivElement

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

---

props? CreateOrganizationProps The properties to pass to the <CreateOrganization /> component

mountCreateOrganization() usage

main.js

import { OneAuxilia } from '@oneauxilia/oneauxilia-js'

// Initialize OneAuxilia with your OneAuxilia publishable key
const oneauxiliaPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

const oneauxilia = new OneAuxilia(oneauxiliaPubKey)
await oneauxilia.load()

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

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

oneauxilia.mountCreateOrganization(createOrgDiv)

unmountCreateOrganization()

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

function unmountCreateOrganization(node: HTMLDivElement): void

unmountCreateOrganization() params

---

node HTMLDivElement

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

unmountCreateOrganization() usage

main.js

import { OneAuxilia } from '@oneauxilia/oneauxilia-js'

// Initialize OneAuxilia with your OneAuxilia publishable key
const oneauxiliaPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

const oneauxilia = new OneAuxilia(oneauxiliaPubKey)
await oneauxilia.load()

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

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

oneauxilia.mountCreateOrganization(createOrgDiv)

// ...

oneauxilia.unmountCreateOrganization(createOrgDiv)

openCreateOrganization()

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

function openCreateOrganization(props?: CreateOrganizationProps): void

openCreateOrganization() params

---

props? CreateOrganizationProps

The properties to pass to the <CreateOrganization /> component

openCreateOrganization() usage

main.js

import { OneAuxilia } from '@oneauxilia/oneauxilia-js'

// Initialize OneAuxilia with your OneAuxilia publishable key
const oneauxiliaPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

const oneauxilia = new OneAuxilia(oneauxiliaPubKey)
await oneauxilia.load()

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

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

oneauxilia.openCreateOrganization(createOrgDiv)

closeCreateOrganization()

Closes the organization profile overlay.

function closeCreateOrganization(): void

closeCreateOrganization() usage

main.js

import { OneAuxilia } from '@oneauxilia/oneauxilia-js'

// Initialize OneAuxilia with your OneAuxilia publishable key
const oneauxiliaPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

const oneauxilia = new OneAuxilia(oneauxiliaPubKey)
await oneauxilia.load()

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

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

oneauxilia.openCreateOrganization(createOrgDiv)

// ...

oneauxilia.closeCreateOrganization(createOrgDiv)