# `$organizationStore`

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

## [How to use the `$organizationStore` store](/content/docs/reference/astro/client-side-helpers/organization-store#how-to-use-the-organization-store-store/index.html)

The following example demonstrates how to use the [$organizationStore](/content/docs/reference/astro/client-side-helpers/organization-store/index.html) store to access the [Organization](/content/docs/astro/reference/objects/organization/index.html) object, which allows you to access the current Active Organization⁠.

### Example Code in React

```jsx
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](/content/docs/reference/astro/client-side-helpers/organization-store#paginating-data/index.html)

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](/content/docs/astro/reference/types/clerk-paginated-response/index.html) object.

### Example Code in React

```jsx
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>
  )
}
```