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.

1
import { useState } from "react";
2
import { SignedIn, useOrganizations } from "@clerk/clerk-react";
3

4
function App() {
5
  return (
6
    <SignedIn>
7
      <NewOrganization />
8
    </SignedIn>
9
  );
10
}
11

12
// Form to create a new organization. The current user
13
// will become the organization administrator.
14
function NewOrganization() {
15
  const [name, setName] = useState("");
16
  const router = useRouter();
17

18
  const { createOrganization } = useOrganizations();
19

20
  async function submit(e) {
21
    e.preventDefault();
22
    try {
23
      // Create a new organization.
24
      await createOrganization({ name });
25
      setName("");
26
      // Do anything after the action is complete
27
    } catch (err) {
28
      console.error(err);
29
    }
30
  }
31

32
  return (
33
    <div>
34
      <h2>Create an organization</h2>
35
      <form onSubmit={submit}>
36
        <div>
37
          <label>Name</label>
38
          <br />
39
          <input
40
            name="name"
41
            value={name}
42
            onChange={(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.
2
import { SignedIn, useOrganizations } from "@clerk/clerk-react";
3

4
function App() {
5
  return (
6
    <SignedIn>
7
      <OrganizationMemberships />
8
    </SignedIn>
9
  );
10
}
11

12
function OrganizationMemberships() {
13
  const [organizationMemberships, setOrganizationMemberships] = useState([]);
14

15
  const { getOrganizationMemberships } = useOrganizations();
16

17
  useEffect(() => {
18
    async function fetchOrganizationMemberships() {
19
      try {
20
        const orgs = await getOrganizationMemberships();
21
        setOrganizationMemberships(orgs);
22
      } catch (err) {
23
        console.error(err);
24
      }
25
    }
26

27
    fetchOrganizationMemberships();
28
  }, []);
29

30
  return (
31
    <div>
32
      <h2>Your organizations</h2>
33
      <ul>
34
        {organizationMemberships.map(({ organization }) => (
35
            <p
36
              key={organization.id}
37
            >
38
              {organization.name}
39
            </p>
40
          ))}
41
      </ul>
42
    </div>
43
  );
44
}

1
import { useState } from "react";
2
import { SignedIn, useOrganizations } from "@clerk/clerk-react";
3

4
function App() {
5
  return (
6
    <SignedIn>
7
      <GetOrganization orgId={'test_org_id'} />
8
    </SignedIn>
9
  );
10
}
11

12
function GetOrganization({ orgId }){
13
  const [organization, setOrganization] = useState(null);
14

15
  const { getOrganization } = useOrganizations();
16

17
  useEffect(() => {
18
    async function fetchOrganization() {
19
      try {
20
        const org = await getOrganization(orgId);
21
        setOrganization(orgs);
22
      } catch (err) {
23
        console.error(err);
24
      }
25
    }
26

27
    fetchOrganization();
28
  }, [orgId]);
29
  
30
  if(!organization){
31
    return null;
32
  }
33
  
34
  return (
35
    <div>
36
      <h2>Organization {organization.name} with id: {organization.id}</h2>
37
    </div>
38
  );
39
}