`useOrganizations()`

This hook has been deprecated in favor of useOrganization() and useOrganizationList().

The useOrganizations() hook gives you access to the Organization object and related object methods.

For now the available methods are: createOrganization(), getOrganizationMemberships() and getOrganization().

Usage

Make sure you've followed the installation guide for Clerk React 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 />.


import { useState } from "react";
import { SignedIn, useOrganizations } from "@clerk/clerk-react";
 
function App() {
  return (
    <SignedIn>
      <NewOrganization />
    </SignedIn>
  );
}
 
// Form to create a new organization. The current user
// will become the organization administrator.
function NewOrganization() {
  const [name, setName] = useState("");
  const router = useRouter();
 
  const { createOrganization } = useOrganizations();
 
  async function submit(e) {
    e.preventDefault();
    try {
      // Create a new organization.
      await createOrganization({ name });
      setName("");
      // Do anything after the action is complete
    } catch (err) {
      console.error(err);
    }
  }
 
  return (
    <div>
      <h2>Create an organization</h2>
      <form onSubmit={submit}>
        <div>
          <label>Name</label>
          <br />
          <input
            name="name"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        </div>
        <button>Create organization</button>
      </form>
    </div>
  );
}


// Retrieve OrganizationMemberships of the current user.
import { SignedIn, useOrganizations } from "@clerk/clerk-react";
 
function App() {
  return (
    <SignedIn>
      <OrganizationMemberships />
    </SignedIn>
  );
}
 
function OrganizationMemberships() {
  const [organizationMemberships, setOrganizationMemberships] = useState([]);
 
  const { getOrganizationMemberships } = useOrganizations();
 
  useEffect(() => {
    async function fetchOrganizationMemberships() {
      try {
        const orgs = await getOrganizationMemberships();
        setOrganizationMemberships(orgs);
      } catch (err) {
        console.error(err);
      }
    }
 
    fetchOrganizationMemberships();
  }, []);
 
  return (
    <div>
      <h2>Your organizations</h2>
      <ul>
        {organizationMemberships.map(({ organization }) => (
            <p
              key={organization.id}
            >
              {organization.name}
            </p>
          ))}
      </ul>
    </div>
  );
}


import { useState } from "react";
import { SignedIn, useOrganizations } from "@clerk/clerk-react";
 
function App() {
  return (
    <SignedIn>
      <GetOrganization orgId={'org_123'} />
    </SignedIn>
  );
}
 
function GetOrganization({ orgId }){
  const [organization, setOrganization] = useState(null);
 
  const { getOrganization } = useOrganizations();
 
  useEffect(() => {
    async function fetchOrganization() {
      try {
        const org = await getOrganization(orgId);
        setOrganization(orgs);
      } catch (err) {
        console.error(err);
      }
    }
 
    fetchOrganization();
  }, [orgId]);
  
  if(!organization){
    return null;
  }
  
  return (
    <div>
      <h2>Organization {organization.name} with id: {organization.id}</h2>
    </div>
  );
}

Last updated on October 16, 2023