npm package: @getmarvia/web-dam
Description: Marvia Web Dam
Latest version: 0.0.1-beta.7

# Marvia Web Dam

### Usage
```tsx
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 />)
```

```html
<!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
```ts
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`                           |