useOrganizations
Access methods for the Organization and related objects.
Overview
The useOrganizations
hook gives you access to Organization and related object methods. Calling the hook will return an object structure with the available methods.
For now the available methods are: createOrganization
, getOrganizationMemberships
and getOrganization.
Usage
Make sure you've followed the installation guide for Clerk React or Clerk Next.js
before running the snippets below.
The examples below illustrates simple usage of the methods available. Note that your component must be a descendant of the <SignedIn/> component, which in turn needs to be wrapped inside the <ClerkProvider/>.
A more guided approach can be found at the Organizations Popular Guide section.
1import { useState } from "react";2import { SignedIn, useOrganizations } from "@clerk/clerk-react";34function App() {5return (6<SignedIn>7<NewOrganization />8</SignedIn>9);10}1112// Form to create a new organization. The current user13// will become the organization administrator.14function NewOrganization() {15const [name, setName] = useState("");16const router = useRouter();1718const { createOrganization } = useOrganizations();1920async function submit(e) {21e.preventDefault();22try {23// Create a new organization.24await createOrganization({ name });25setName("");26// Do anything after the action is complete27} catch (err) {28console.error(err);29}30}3132return (33<div>34<h2>Create an organization</h2>35<form onSubmit={submit}>36<div>37<label>Name</label>38<br />39<input40name="name"41value={name}42onChange={(e) => setName(e.target.value)}43/>44</div>45<button>Create organization</button>46</form>47</div>48);49}
1// Retrieve OrganizationMemberships of the current user.2import { SignedIn, useOrganizations } from "@clerk/clerk-react";34function App() {5return (6<SignedIn>7<OrganizationMemberships />8</SignedIn>9);10}1112function OrganizationMemberships() {13const [organizationMemberships, setOrganizationMemberships] = useState([]);1415const { getOrganizationMemberships } = useOrganizations();1617useEffect(() => {18async function fetchOrganizationMemberships() {19try {20const orgs = await getOrganizationMemberships();21setOrganizationMemberships(orgs);22} catch (err) {23console.error(err);24}25}2627fetchOrganizationMemberships();28}, []);2930return (31<div>32<h2>Your organizations</h2>33<ul>34{organizationMemberships.map(({ organization }) => (35<p36key={organization.id}37>38{organization.name}39</p>40))}41</ul>42</div>43);44}
1import { useState } from "react";2import { SignedIn, useOrganizations } from "@clerk/clerk-react";34function App() {5return (6<SignedIn>7<GetOrganization orgId={'test_org_id'} />8</SignedIn>9);10}1112function GetOrganization({ orgId }){13const [organization, setOrganization] = useState(null);1415const { getOrganization } = useOrganizations();1617useEffect(() => {18async function fetchOrganization() {19try {20const org = await getOrganization(orgId);21setOrganization(orgs);22} catch (err) {23console.error(err);24}25}2627fetchOrganization();28}, [orgId]);2930if(!organization){31return null;32}3334return (35<div>36<h2>Organization {organization.name} with id: {organization.id}</h2>37</div>38);39}