$organizationStore

The $organizationStore store is used to retrieve attributes of the currently Active Organization⁠.

How to use the $organizationStore store

The following example demonstrates how to use the $organizationStore store to access the Organization object, which allows you to access the current Active Organization⁠.

Example Code in React

import { useStore } from '@nanostores/react'
import { $organizationStore } from '@clerk/astro/client'

export default function Home() {
  const organization = useStore($organizationStore)

// Add logic to handle loading state
  if (organization === undefined) return <p>Loading...</p>

// Add logic to handle no Active Organization state
  if (organization === null) return <p>Set an Active Organization to access this page.</p>

return <p>This current Organization is {organization.name}</p>
}

Paginating data

The following example demonstrates how to implement pagination for Organization memberships. The memberships state will be populated with the first page of the Organization's memberships. When the "Previous page" or "Next page" button is clicked, the fetchMemberships function will be called to fetch the previous or next page of memberships.

You can implement this pattern to any Clerk function that returns a ClerkPaginatedResponse object.

Example Code in React

import { useState, useEffect } from 'react'
import { $organizationStore } from '@clerk/astro/client'
import { useStore } from '@nanostores/react'

export default function OrganizationMembers() {
  const [memberships, setMemberships] = useState([])
  const [currentPage, setCurrentPage] = useState(1)
  const organization = useStore($organizationStore)

const pageSize = 10

useEffect(() => {
    fetchMemberships()
  }, [currentPage, organization])

const fetchMemberships = async () => {
    if (!organization) return

const { data } = await organization.getMemberships({
      initialPage: currentPage,
      pageSize: 5,
    })
    setMemberships(data)
  }

const fetchPrevious = () => setCurrentPage(currentPage - 1)
  const fetchNext = () => setCurrentPage(currentPage + 1)

// Add logic to handle loading state
  if (organization === undefined) return <p>Loading...</p>

// Add logic to handle no Active Organization state
  if (organization === null) return <p>Set an Active Organization to access this page.</p>

return (
    <div>
      <h2>Organization members</h2>
      <ul>
        {memberships.map((membership) => (
          <li key={membership.id}>
            {membership.publicUserData.firstName} {membership.publicUserData.lastName} &lt;
            {membership.publicUserData.identifier}&gt; :: {membership.role}
          </li>
        ))}
      </ul>
      <div>
        <button onClick={fetchPrevious} disabled={currentPage === 1}>
          Previous
        </button>
        <button onClick={fetchNext}>Next</button>
      </div>
    </div>
  )
}