@bynder/compact-view v4.2.3

Bynder Compact View React Component

Usage example

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { CompactView, Modal, Login } from '@bynder/compact-view';
const assetFieldSelection = `
  name
  url
  originalUrl
  derivatives {
    thumbnail
    webImage
  }
  ... on Video {
    previewUrls
  }
`;
class App extends React.Component {
	constructor(props) {
		super(props);
		this.state = { isOpen: false };
	}
	onSuccess(assets) {
		console.log(assets);
	}
	render() {
		return (
			<>
				<button onClick={() => this.setState({ isOpen: true })}>Open Compact View</button>
				<Modal isOpen={this.state.isOpen} onClose={() => this.setState({ isOpen: false })}>
					<Login>
						<CompactView
							language="en_US"
							onSuccess={this.onSuccess}
							assetFieldSelection={assetFieldSelection}
						/>
					</Login>
				</Modal>
			</>
		);
	}
}
ReactDOM.render(<App />, document.getElementById('app'));

See more info on Bynder Docs

Configuration

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

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

type AssetFilterJson = {
	assetType_in?: AssetType[]; //predefined asset types
	collectionId?: string; //predefined collection id
	metapropertyOptionId_in?: string[]; //predefined metaproperty IDs
	searchTerm?: string; //predefined search term
	tagNames_in?: 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;
};