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 (^19.2.5).

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.

<Login> props (CompactViewLoginProps)

<Modal> props (CompactViewModalProps)

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 VideoPreset = {
    presetId: string;
    name: string;
    format: string;
    previewUrl: 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 };
    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.