Organization Avatars

This package provides an OrganizationAvatars React component which encapsulates displaying and updating an organization's avatar.

Usage

import { OrganizationAvatars } from "@planningcenter/organization-avatars"
import "@planningcenter/organization-avatars/style.css"

<OrganizationAvatars
  orgName="Demo Church"
  avatarUrl="https://example.com/avatar.png"
  darkModeAvatarUrl="https://example.com/avatar-dark.png"
  showDarkModeAvatar
  onAvatarUpdate={(mode, newUrl) => console.log(mode, newUrl)}
/>

To see a working example, see the /organization page in Accounts. The OrganizationAvatars component is mounted in the _church_information partial.

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | orgName | string | required | The organization name, used for avatar alt text. | | avatarUrl | string | undefined | URL of the current light mode avatar. When no darkModeAvatarUrl is provided, this is also used for the dark mode slot. | | darkModeAvatarUrl | string | undefined | URL of the current dark mode avatar. Falls back to avatarUrl if not set. | | showDarkModeAvatar | boolean | false | Whether to render the dark mode avatar UI alongside the light mode avatar. Intended to be controlled by a feature flag. | | onAvatarUpdate | (mode: AvatarMode, newUrl: string) => void | undefined | Callback fired after a successful upload or delete. mode is "avatar" or "dark_mode_avatar". newUrl is the new URL (or "" on delete). | | pcoEnv | Environment | undefined | Planning Center environment override ("production", "staging", "development", "test", "prototype"). When omitted, the environment is inferred automatically. | | readOnly | boolean | false | Disables the edit button, preventing uploads and deletes. |

Types

type AvatarMode = "avatar" | "dark_mode_avatar"

type Environment = "production" | "staging" | "development" | "test" | "prototype"

Development

yarn dev — Start a local demo app at http://localhost:5173 for interactive testing (API is mocked)