Installation
Nothing to add. This component ships as source in your download, so it is already in your project.
src/vui/organization-profile.tsx@viliha/vui-react/organization-profileThe exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.
Usage
import { ORGANIZATION, BrandAsset } from "@viliha/vui-react/organization-profile";Exports
Everything this family exports. They are read from the source, so this list is what the package actually ships.
| Prop | Type | Default |
|---|---|---|
| ORGANIZATION | component | — |
| BrandAsset | component | — |
BrandAsset props
| Prop | Type | Default | What it does |
|---|---|---|---|
| value | string | — | The URL to display. Whatever you store (an id, a path) is your business — the control only renders this. |
| onPick? | (file: File) => BrandAssetPick | void | Promise<BrandAssetPick | void> | — | Called with the picked file. Upload it and return the URL to show. Async is fine: the control shows its own busy state until the promise settles, and shows the error if it rejects. |
| onRemove? | () => void | — | Called when Remove is clicked, before the value is cleared. Use it to delete the stored asset. |
| onChange? | (value: string) => void | — | Receives the new URL after a pick, and `""` after Remove. `renderInput` wires this to the form value for you. |
| meta? | BrandAssetMeta | — | Details for the current asset, shown under the preview. |
| accept? | string | "image/*" | File picker filter. Defaults to every image type. |
| maxBytes? | number | — | Reject anything larger, before `onPick` is called. |
| busy? | boolean | — | Force the busy state, e.g. while a save is in flight. |
| inline? | boolean | — | Demo escape hatch: with no backend, read the file as a base64 data URI and use that as the value. Never ship this against a real API — the whole image ends up in the field. |
| square? | boolean | — | |
| placeholder? | ReactNode | — | What the empty box shows. Defaults to "None"; an avatar passes initials. |
| fit? | "contain" | "cover" | "contain" | `contain` keeps a logo whole (default); `cover` fills the box, for a photo. |
| readOnly? | boolean | — |
Customize
Every value this component draws comes from the theme: the colours, the radius, the control height and the type scale. Change a token and this moves with everything else, which is the difference between theming the product and overriding a component. See Theming for the token contract, and Swapping defaults for replacing the markup itself.