# Bynder Compact View — React component Embeddable Bynder asset picker, distributed as the [`@bynder/compact-view`](https://www.npmjs.com/package/@bynder/compact-view) NPM package. For the CDN/`window.BynderCompactView.open()` usage, see the [docs](https://developers.bynder.com/universal-compact-view). ## Install ```sh npm install @bynder/compact-view ``` Peer dependencies: `react` and `react-dom` (`^18.3.1 || ^19.2.5`). ## Exports ```ts import { CompactView, Login, Modal, // types type CompactViewProps, type CompactViewLoginProps, type CompactViewModalProps, } from '@bynder/compact-view'; ``` ## Usage `CompactView` must be rendered inside ``. `` is optional — if omitted, mount `` into your own container element. ```jsx import React, { useState } from 'react'; import { createRoot } from 'react-dom/client'; import { CompactView, Login, Modal } from '@bynder/compact-view'; const assetFieldSelection = ` name url originalUrl derivatives { thumbnail webImage } ... on Video { previewUrls } `; function App() { const [isOpen, setIsOpen] = useState(false); const onSuccess = (assets, additionalInfo) => { console.log(assets, additionalInfo); setIsOpen(false); }; return ( <> setIsOpen(false)}> ); } const root = createRoot(document.getElementById('app')); root.render(); ``` For the container-mounted variant, drop `` and pass `isContainerMode` to ``: ```jsx
``` See more on [Bynder Docs](https://developer-docs.bynder.com/ui-components/#compact-view). ## API ### `` props (`CompactViewProps`) All props are optional. | Prop | Type | Default | Description | | ------------------------------- | ---------------------------------------------------------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `onSuccess` | `(assets: OnSuccessAsset[], info: AdditionalInfo) => void` | `console.log` | Called with the selected assets and an `additionalInfo` object (currently `{ selectedFile? }`). | | `language` | `"en_US" \| "nl_NL" \| "de_DE" \| "fr_FR" \| "es_ES"` | `"en_US"` | UI language. Only the first two characters of the locale are used to load translations. | | `mode` | `"SingleSelect" \| "SingleSelectFile" \| "MultiSelect"` | `"MultiSelect"` | Selection mode. | | `assetTypes` | `AssetType[]` | `["IMAGE", "AUDIO", "VIDEO", "DOCUMENT"]` | Allowed asset types. Values are case-insensitive at the API surface. | | `assetFieldSelection` | `string` | See `defaultAssetFieldSelection` | GraphQL field selection for the asset returned to `onSuccess`. Fields outside this selection are `undefined`. | | `assetFilter` | `AssetFilterJson` | None | Predefined filters applied on open. | | `defaultSearchTerm` | `string` | None | Initial value for the search input. | | `defaultImageDerivativeName` | `string` | None | Name of the image derivative returned as `selectedFile` for `SingleSelectFile`. | | `defaultVideoDerivativeName` | `string` | None | Name of the video derivative returned as `selectedFile` for `SingleSelectFile`. | | `selectedAssets` | `string[]` | `[]` | Asset IDs to preselect. In single-select modes, only the last ID is used. | | `theme` | `Theme` | None | Theming overrides (see below). | | `hideExternalAccess` | `boolean` | `false` | Removes access to external DAM from assets and collections. | | `hideLimitedUse` | `boolean` | `false` | Hides limited-use assets from the grid. | | `hideSwitch` | `boolean` | `false` | Hides the Assets/Collections switch. | | `selectAllOption` | `boolean` | `false` | Adds a "Select all" action in `MultiSelect` mode. | | `noCache` | `boolean` | `false` | Disables HTTP caching on GraphQL requests. | | `isContainerMode` | `boolean` | `false` | Required when mounting `` inside your own DOM container instead of ``. | | `resetStoreOnMount` | `boolean` | `false` | In `isContainerMode`, resets internal stores (search, filters, selection, routing) on mount. Ignored otherwise — non-container mode always resets. | | `enableDASH` | `boolean` | `false` | Includes DASH streaming links alongside HLS in `streamingLinks` for video assets. | | `enableDATPermissionManagement` | `boolean` | `false` | When `true`, DAT UI (the "New transformation" link and the preset picker in the transformation editor) is gated on the authenticated user's DAT permissions from `module_permissions` in the access token. When `false`, DAT UI is always available and the preset picker is hidden — matching the behavior before permission-based gating was introduced. | ### `` props (`CompactViewLoginProps`) | Prop | Type | Description | | ---------------- | -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | | `portal` | `{ url: string; editable?: boolean }` (`PortalConfig`) | Default portal URL. `editable: false` locks Compact View to a single portal (default `true`). | | `language` | same as `CompactView.language` | Localizes the login screen. | | `authentication` | `{ getAccessToken: () => string; hideLogout?: boolean }` | Skip the interactive OAuth flow by providing an access token. `hideLogout: true` hides the logout button. | | `onLogout` | `() => void` | Called after the user logs out. | | `children` | `React.ReactNode` | Typically ``. | ### `` props (`CompactViewModalProps`) | Prop | Type | Description | | --------- | --------------------- | --------------------------------------------------------------------- | | `isOpen` | `boolean` | Controls visibility. | | `onClose` | `() => void` | Called on backdrop click, escape, or close button. | | `style` | `React.CSSProperties` | Inline styles applied to the modal wrapper (e.g. `{ width: '90%' }`). | ### Types ```ts type AssetType = 'AUDIO' | 'DOCUMENT' | 'IMAGE' | 'VIDEO' | 'ARCHIVE'; type SelectionMode = 'SingleSelect' | 'SingleSelectFile' | 'MultiSelect'; type File = { url: string; width?: number; height?: number; fileSize?: number; }; type PortalConfig = { url: string; editable?: boolean; }; type AssetFilterJson = { predefinedAssetType?: AssetType[]; collectionId?: string; predefinedMetapropertiesOptions?: Record>; searchTerm?: string; predefinedTagNames?: string[]; isLimitedUse?: boolean; showToolbar?: boolean; }; type Theme = { colorPrimary?: string; colorButtonPrimary?: string; colorButtonPrimaryLabel?: string; colorButtonPrimaryActive?: string; colorButtonPrimaryHover?: string; colorButtonPrimaryHoverLabel?: string; }; type VideoPreset = { presetId: string; name: string; format: string; previewUrl: string; }; type AdditionalInfo = { selectedFile?: File }; interface OnSuccessAsset { id: string; files: Record; name?: string; description?: string; databaseId?: string; createdAt?: string; originalUrl?: string; publishedAt?: string; tags?: string[]; type?: AssetType; updatedAt?: string; url?: string; extensions?: string[]; metaproperties?: { nodes: OnSuccessAssetMetaproperty[] }; textMetaproperties?: OnSuccessAssetTextMetaproperty[]; derivatives?: { thumbnail?: string; webImage?: string }; previewUrls?: string[]; streamingLinks?: { hls?: string; dash?: string; embedCode?: string }; videoPresets?: VideoPreset[]; } type OnSuccessCallback = (assets: OnSuccessAsset[], info: AdditionalInfo) => void; ``` `OnSuccessAsset` reflects the default GraphQL field selection. With a custom `assetFieldSelection`, requested fields not declared on `OnSuccessAsset` will not be typed — cast to a custom interface to read them.