diff --git a/custom_components/reflex_clerk_api/__init__.py b/custom_components/reflex_clerk_api/__init__.py
index e480af7..e935c06 100644
--- a/custom_components/reflex_clerk_api/__init__.py
+++ b/custom_components/reflex_clerk_api/__init__.py
@@ -25,6 +25,12 @@
sign_out_button,
sign_up_button,
)
+from .organization_components import (
+ create_organization,
+ organization_profile,
+ organization_switcher,
+ organization_list,
+)
from .user_components import user_button, user_profile
__all__ = [
@@ -36,7 +42,11 @@
"clerk_loaded",
"clerk_loading",
"clerk_provider",
+ "create_organization",
"on_load",
+ "organization_list",
+ "organization_profile",
+ "organization_switcher",
"protect",
"redirect_to_user_profile",
"register_on_auth_change_handler",
diff --git a/custom_components/reflex_clerk_api/organization_components.py b/custom_components/reflex_clerk_api/organization_components.py
index 3883d0e..bb1ced1 100644
--- a/custom_components/reflex_clerk_api/organization_components.py
+++ b/custom_components/reflex_clerk_api/organization_components.py
@@ -1,6 +1,7 @@
-from typing import Optional
+import reflex as rx
from reflex_clerk_api.base import ClerkBase
+from reflex_clerk_api.models import Appearance
class CreateOrganization(ClerkBase):
@@ -9,24 +10,30 @@ class CreateOrganization(ClerkBase):
This component renders Clerk's React component,
allowing users to set up new organizations with customizable appearance and routing.
-
- Props:
- appearance: Optional object to style your components. Will only affect Clerk components.
- path: The path where the component is mounted when routing is set to 'path'.
- routing: The routing strategy for your pages. Defaults to 'path' for frameworks
- that handle routing, or 'hash' for other SDKs.
- after_create_organization_url: The full URL or path to navigate to after creating an organization.
- fallback: An optional element to be rendered while the component is mounting.
"""
tag = "CreateOrganization"
- # Optional props that CreateOrganization supports
- appearance: Optional[str] = None
- path: Optional[str] = None
- routing: Optional[str] = None
- after_create_organization_url: Optional[str] = None
- fallback: Optional[str] = None
+ appearance: Appearance | None = None
+ "Optional object to style your components. Will only affect Clerk components."
+
+ path: str | None = None
+ "The path where the component is mounted when routing is set to 'path'."
+
+ routing: str | None = None
+ "The routing strategy for your pages. Defaults to 'path' for frameworks that handle routing, or 'hash' for other SDKs."
+
+ after_create_organization_url: str | None = None
+ "The full URL or path to navigate to after creating an organization."
+
+ skip_invitation_screen: bool | None = None
+ "Controls whether to skip the invitation screen when creating an organization."
+
+ hide_slug: bool | None = None
+ "Controls whether the optional slug field in the Organization creation screen is hidden."
+
+ fallback: rx.Component | None = None
+ "An optional element to be rendered while the component is mounting."
class OrganizationProfile(ClerkBase):
@@ -35,26 +42,27 @@ class OrganizationProfile(ClerkBase):
This component renders Clerk's React component,
allowing users to manage organization information, members, billing, and security settings.
-
- Props:
- appearance: Optional object to style your components. Will only affect Clerk components.
- path: The path where the component is mounted when routing is set to 'path'.
- routing: The routing strategy for your pages. Defaults to 'path' for frameworks
- that handle routing, or 'hash' for other SDKs.
- after_leave_organization_url: The full URL or path to navigate to after leaving an organization.
- custom_pages: An array of custom pages to add to the organization profile.
- fallback: An optional element to be rendered while the component is mounting.
"""
tag = "OrganizationProfile"
- # Optional props that OrganizationProfile supports
- appearance: Optional[str] = None
- path: Optional[str] = None
- routing: Optional[str] = None
- after_leave_organization_url: Optional[str] = None
- custom_pages: Optional[str] = None
- fallback: Optional[str] = None
+ appearance: Appearance | None = None
+ "Optional object to style your components. Will only affect Clerk components."
+
+ path: str | None = None
+ "The path where the component is mounted when routing is set to 'path'."
+
+ routing: str | None = None
+ "The routing strategy for your pages. Defaults to 'path' for frameworks that handle routing, or 'hash' for other SDKs."
+
+ after_leave_organization_url: str | None = None
+ "The full URL or path to navigate to after leaving an organization."
+
+ custom_pages: list | None = None
+ "An array of custom pages to add to the organization profile."
+
+ fallback: rx.Component | None = None
+ "An optional element to be rendered while the component is mounting."
class OrganizationSwitcher(ClerkBase):
@@ -63,35 +71,48 @@ class OrganizationSwitcher(ClerkBase):
This component renders Clerk's React component,
providing a dropdown interface for organization switching with customizable appearance.
-
- Props:
- appearance: Optional object to style your components. Will only affect Clerk components.
- organization_profile_mode: Controls whether selecting the organization opens as a modal or navigates to a page.
- organization_profile_url: The full URL or path leading to the organization management interface.
- create_organization_mode: Controls whether selecting create organization opens as a modal or navigates to a page.
- create_organization_url: The full URL or path leading to the create organization interface.
- after_leave_organization_url: The full URL or path to navigate to after leaving an organization.
- after_create_organization_url: The full URL or path to navigate to after creating an organization.
- after_select_organization_url: The full URL or path to navigate to after selecting an organization.
- default_open: Controls whether the OrganizationSwitcher should open by default during the first render.
- hide_personal_account: Controls whether the personal account option is hidden in the switcher.
- fallback: An optional element to be rendered while the component is mounting.
"""
tag = "OrganizationSwitcher"
- # Optional props that OrganizationSwitcher supports
- appearance: Optional[str] = None
- organization_profile_mode: Optional[str] = None
- organization_profile_url: Optional[str] = None
- create_organization_mode: Optional[str] = None
- create_organization_url: Optional[str] = None
- after_leave_organization_url: Optional[str] = None
- after_create_organization_url: Optional[str] = None
- after_select_organization_url: Optional[str] = None
- default_open: Optional[str] = None
- hide_personal_account: Optional[str] = None
- fallback: Optional[str] = None
+ appearance: Appearance | None = None
+ "Optional object to style your components. Will only affect Clerk components."
+
+ organization_profile_mode: str | None = None
+ "Controls whether selecting the organization opens as a modal or navigates to a page. Defaults to 'modal'."
+
+ organization_profile_url: str | None = None
+ "The full URL or path leading to the organization management interface."
+
+ organization_profile_props: dict | None = None
+ "Specify options for the underlying OrganizationProfile component."
+
+ create_organization_mode: str | None = None
+ "Controls whether selecting create organization opens as a modal or navigates to a page. Defaults to 'modal'."
+
+ create_organization_url: str | None = None
+ "The full URL or path leading to the create organization interface."
+
+ after_leave_organization_url: str | None = None
+ "The full URL or path to navigate to after leaving an organization."
+
+ after_create_organization_url: str | None = None
+ "The full URL or path to navigate to after creating an organization."
+
+ after_select_organization_url: str | None = None
+ "The full URL or path to navigate to after selecting an organization."
+
+ default_open: bool | None = None
+ "Controls whether the OrganizationSwitcher should open by default during the first render."
+
+ hide_personal: bool | None = None
+ "Controls whether the personal account option is hidden in the switcher."
+
+ hide_slug: bool | None = None
+ "Controls whether the optional slug field in the Organization creation screen is hidden."
+
+ fallback: rx.Component | None = None
+ "An optional element to be rendered while the component is mounting."
class OrganizationList(ClerkBase):
@@ -100,31 +121,39 @@ class OrganizationList(ClerkBase):
This component renders Clerk's React component,
providing an interface to view and manage organization memberships.
-
- Props:
- appearance: Optional object to style your components. Will only affect Clerk components.
- after_create_organization_url: The full URL or path to navigate to after creating an organization.
- after_select_organization_url: The full URL or path to navigate to after selecting an organization.
- after_select_personal_url: The full URL or path to navigate to after selecting the personal account.
- create_organization_mode: Controls whether selecting create organization opens as a modal or navigates to a page.
- create_organization_url: The full URL or path leading to the create organization interface.
- hide_personal_account: Controls whether the personal account option is hidden in the list.
- skip_invitation_screen: Controls whether to skip the invitation screen when creating an organization.
- fallback: An optional element to be rendered while the component is mounting.
"""
tag = "OrganizationList"
- # Optional props that OrganizationList supports
- appearance: Optional[str] = None
- after_create_organization_url: Optional[str] = None
- after_select_organization_url: Optional[str] = None
- after_select_personal_url: Optional[str] = None
- create_organization_mode: Optional[str] = None
- create_organization_url: Optional[str] = None
- hide_personal_account: Optional[str] = None
- skip_invitation_screen: Optional[str] = None
- fallback: Optional[str] = None
+ appearance: Appearance | None = None
+ "Optional object to style your components. Will only affect Clerk components."
+
+ after_create_organization_url: str | None = None
+ "The full URL or path to navigate to after creating an organization."
+
+ after_select_organization_url: str | None = None
+ "The full URL or path to navigate to after selecting an organization."
+
+ after_select_personal_url: str | None = None
+ "The full URL or path to navigate to after selecting the personal account."
+
+ create_organization_mode: str | None = None
+ "Controls whether selecting create organization opens as a modal or navigates to a page. Defaults to 'modal'."
+
+ create_organization_url: str | None = None
+ "The full URL or path leading to the create organization interface."
+
+ hide_personal: bool | None = None
+ "Controls whether the personal account option is hidden in the list."
+
+ hide_slug: bool | None = None
+ "Controls whether the optional slug field in the Organization creation screen is hidden."
+
+ skip_invitation_screen: bool | None = None
+ "Controls whether to skip the invitation screen when creating an organization."
+
+ fallback: rx.Component | None = None
+ "An optional element to be rendered while the component is mounting."
create_organization = CreateOrganization.create