Bynder Compact View React Component

Usage example

``jsx
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { CompactView, Modal, Login } from '@bynder/compact-view';
const assetFieldSelection =
name
url
originalUrl
derivatives {
thumbnail
webImage
}
... on Video {
previewUrls
}
;
const App = () => {
const [isOpen, setIsOpen] = useState(false);

onSuccess(assets) {
console.log(assets);
}

render() {
return (
<>
Open Compact View


language="en_US"
onSuccess={this.onSuccess}
assetFieldSelection={assetFieldSelection}
/>



);
}
}
const root = createRoot(document.getElementById('app'));
root.render();
`

See more info on Bynder Docs

$3

The optional options object accepts the following attributes (which are also all optional):

| Attribute | Description | Possible Values | Default Value |
| --------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------ | ----------------------------------------- |
| onSuccess | Comma separated list of asset types to display | function (assets: asset[], { selectedFile?: File })): void | console.log |
| container | A DOM element to act as the container for Compact View (disables modal) | A Dom.HTMLElement instance | None |
| portal | Portal config object | | None |
| portal.url | Set a default portal URL for the Compact View login screen | A string containing Bynder portal URL | None |
| portal.readOnly | If true, limits Compact View to a single portal | true, false | false |
| defaultSearchTerm | Set the initial value for search term | "Keyword" | None |
| language | Set language for the Compact View | "en_US", "nl_NL", "de_DE", "fr_FR", "es_ES", | "en_US" |
| mode | Set the Compact View to allow multiple or single asset selection | "SingleSelect", "SingleSelectFile", "MultiSelect" | "MultiSelect" |
| theme | A theme object for customizing Compact View look and feel | Object (see below for recognized keys) | None |
| assetTypes | An array of strings for limiting allowed asset types | AssetType[] | ["image", "audio", "video", "document"] |
| hideExternalAccess | If true, removes access to external DAM from assets and collections | true, false | false |
| hideLimitedUse | If true, limited assets are hidden | true, false | false |
| selectedAssets | An array of asset ids. When mode is different than MultiSelect, the last id in the array will be selected | ["id1", "id2", "id3"] | [] |
| modalStyles | An object with css properties for modal wrapper using strings as keys and values { [key: string]: string } | {"width": "100%"} | None |
| assetFieldSelection | A multiline string containing desired asset fields | string | None |
| assetFilter | Set predefined filters for the Compact View | AssetFilterJson | None |

`ts
type File = {
url: string;
width?: number;
height?: number;
fileSize?: number;
};

type AssetFilterJson = {
predefinedAssetType?: AssetType[]; //predefined asset types
collectionId?: string; //predefined collection id
predefinedMetapropertiesOptions?: string[]; //predefined metaproperty IDs
searchTerm?: string; //predefined search term
predefinedTagNames?: string[]; //predefined tags
isLimitedUse?: boolean; //whether or not this asset is marked as Limited Use
showToolbar?: boolean; //show toolbar for predefined filters (false by default)
};

type AssetType = 'AUDIO' | 'DOCUMENT' | 'IMAGE' | 'VIDEO' | 'ARCHIVE';

type theme = {
colorPrimary?: CSSColor;
colorButtonPrimary?: CSSColor;
colorButtonPrimaryLabel?: CSSColor;
colorButtonPrimaryActive?: CSSColor;
colorButtonPrimaryHover?: CSSColor;
colorButtonPrimaryHoverLabel?: CSSColor;
};
``