@getmarvia/web-dam
v0.0.1-beta.7
Published
Marvia Web Dam
Readme
Marvia Web Dam
Usage
import { createRoot } from "react-dom/client"
import { MarviaWebDam } from "@getmarvia/web-dam"
import "@getmarvia/web-dam/index.css"
function App() {
const onApply = (assets) => {
console.info(assets)
}
return (
<div id="container">
<MarviaWebDam onApply={onApply} {...props} />
</div>
)
}
const root = createRoot(document.getElementById("root"))
root.render(<App />)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
/>
<script src="https://d3neo4j9u6yolw.cloudfront.net/public/static/web-dam/0.0.1-beta.7/marvia-web-dam.js" type="application/javascript"></script>
</head>
<body>
<div id="marvia-web-dam" style="width: 700px;height: 700px;outline: 1px solid #00386B; margin:20px"></div>
<script>
MarviaWebDam.open({
container: "marvia-web-dam",
onApply: (assets) => {
const assetsContainer = document.getElementById("assets")
for (const asset of assets) {
assetsContainer.innerHTML += `<li><img src="${asset.cdn_url}" />${asset.name}</li>`
}
}
})
</script>
</body>
</html>Options
| Attribute | Description | Type | Default |
|-----------|-------------------------------------------------------------------------------|---------------------------------------|--------------------|
| container | Sets the Id or the DOM Element to use as the container for the Marvia Web Dam | string or A HTMLElement instance | "marvia-web-dam" |
| domain | The prefilled domain of the Marvia Web Dam instance | string | undefined |
| mode | Sets the selection mode to allow for single or multi selection | "single-select" or "multi-select" | "multi-select" |
| onApply | Callback that returns selected assets | (assets: Array<Asset>) => void | console.log |
Types
type Asset = {
uuid: string
name: string
cdn_url: string
extension: string
content_type: string
width: number
height: number
}Cdn URL
Each asset returned from the onApply callback contains a cdn_url property.
Calling this URL will return the original asset from the Marvia CDN.
The URL can be modified by adding query parameters to the URL.
The following query parameters are supported:
| Parameter | Possible Value(s) | Example |
|--------------|--------------------------------------------------------------------------------------------------------|---------------------------------------------|
| format | One of the following:"auto", "jpeg", "webp", "avif", "png", "svg", "gif" (by default auto is used) | format="png" |
| crop | Comma separated list of four numbers. (order: top, left, width and height) | crop=0,0,100,100 |
| width | Number > 0, (by default uses the original width) | width=100 |
| height | Number > 0, (by default uses the original height) | height=100 |
| quality | Number between 0 and 100 (by default 100) | quality=50 |
| extend | Number > 0 or comma separated list of max 4 numbers (0 by default, order: top, bottom, left, right) | extend=10 or extend=10,0,0,10 |
| background | HexCode or RGB(A) | background=00ff00 or background=0,255,0 |
| max-size | Number in bytes | max-size=100000 |