@bynder/compact-view

Bynder Compact View

Usage no npm install needed!

<script type="module">
  import bynderCompactView from 'https://cdn.skypack.dev/@bynder/compact-view';
</script>

README

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'));