connect mediamodifier mockup api in javascript

To connect to the Mediamodifier Mockup API using JavaScript, you can make use of the Fetch API and Promises. Here's an example code snippet:

index.tsx
const API_KEY = 'your-api-key';
const MOCKUP_ID = 'mockup-id';

fetch(`https://api.mediamodifier.com/mockups/v1/mockup/${MOCKUP_ID}/preview?apikey=${API_KEY}`)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }

    return response.blob();
  })
  .then(blob => {
    const img = document.createElement('img');
    img.src = URL.createObjectURL(blob);
    document.body.appendChild(img);
  })
  .catch(error => {
    console.error('There was a problem fetching the mockup: ', error);
  });
544 chars
20 lines

In this code snippet, we first specify our API Key and the ID of the mockup we want to retrieve. We then use the Fetch API to make a GET request to the Mediamodifier Mockup API endpoint that corresponds to the specified mockup ID. We pass our API Key as a query parameter in the request URL.

The Fetch API returns a Promise that resolves to the raw response of the request. We check that the response is ok, and then return the response as a Blob. A Blob is an object that represents a file-like object of immutable, raw data. In this case, the response body of the request is a PNG image file, hence it is returned as a Blob.

We then create an HTML img element, set its source to a URL created from the Blob using the URL.createObjectURL() method, and finally append the img element to the document body.

If any errors occur during the process, they are caught and logged to the console using the catch() method.