open-index/open-npm huggingface dataset:
npm package: @planningcenter/organization-avatars
Description: Organization avatar upload components for Planning Center apps
Latest version: 1.8.4

# Organization Avatars

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

## Usage

```tsx
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](https://accounts.planningcenteronline.com/organization). The `OrganizationAvatars` component is mounted in [the `_church_information` partial](https://github.com/planningcenter/accounts/blob/main/app/views/organization/show/_church_information.html.erb).

## 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

```ts
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)