Bynder Compact View — React component

Embeddable Bynder asset picker, distributed as the @bynder/compact-view NPM package.

For the CDN/window.BynderCompactView.open() usage, see the docs.

Install

npm install @bynder/compact-view

Peer dependencies: react and react-dom (>=16.8.0 <19.0.0).

Exports

import {
    CompactView,
    Login,
    Modal,
    // types
    type CompactViewProps,
    type CompactViewLoginProps,
    type CompactViewModalProps,
} from '@bynder/compact-view';

Usage

CompactView must be rendered inside <Login>. <Modal> is optional — if omitted, mount <Login> into your own container element.

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 (
        <>
            <button onClick={() => setIsOpen(true)}>Open Compact View</button>
            <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
                <Login portal={{ url: 'portal.bynder.com', editable: true }} language="en_US">
                    <CompactView
                        language="en_US"
                        onSuccess={onSuccess}
                        assetFieldSelection={assetFieldSelection}
                    />
                </Login>
            </Modal>
        </>
    );
}

const root = createRoot(document.getElementById('app'));
root.render(<App />);

For the container-mounted variant, drop <Modal> and pass isContainerMode to <CompactView>:

<div style={{ width: 800, height: 600 }}>
    <Login portal={{ url: 'portal.bynder.com' }}>
        <CompactView isContainerMode onSuccess={onSuccess} />
    </Login>
</div>

See more on Bynder Docs.

API

<CompactView> 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 <Login> inside your own DOM container instead of <Modal>. | | 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. |

<Login> 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 <CompactView>. |

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

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<string, Record<string, string>>;
    searchTerm?: string;
    predefinedTagNames?: string[];
    isLimitedUse?: boolean;
    showToolbar?: boolean;
};

type Theme = {
    colorPrimary?: string;
    colorButtonPrimary?: string;
    colorButtonPrimaryLabel?: string;
    colorButtonPrimaryActive?: string;
    colorButtonPrimaryHover?: string;
    colorButtonPrimaryHoverLabel?: string;
};

type AdditionalInfo = { selectedFile?: File };

interface OnSuccessAsset {
    id: string;
    files: Record<string, File>;
    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 };
}

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.