<Organization />

The Organization component is a declarative way to access the current organization object from the Asgardeo authentication context. It uses render props to expose the organization data, making it easy to display organization information or conditionally render UI based on the active organization.

Usage

Basic Usage

Display organization information:

src/Header.jsx

import { Organization } from '@asgardeo/react'

function Header() {
  return (
    <div>
      <Organization />
    </div>
  )
}

export default Header

Custom Fields

Use render props to customize the display:

src/OrgCard.jsx

import { Organization } from '@asgardeo/react'

function OrgCard() {
  return (
    <Organization>
      {(org) => (
        <div>
          <img src={org.logo} alt={org.name} />
          <h3>{org.name}</h3>
          <p>{org.memberCount} members</p>
        </div>
      )}
    </Organization>
  )
}

export default OrgCard

Props

Prop	Type	Required	Description
organizationId	string	❌	Organization ID to display (defaults to current organization)
children	Function | ReactNode	❌	Render function or default display content