@nuskin/bynder-dat

This library hosts a collection of wrapper functions for bynder's DAT API. The library also builds in both cjs and esm formats. ESM for better treeshaking support. CJS for node/backend apps.

Installing

Usng npm:

npm add @nuskin/bynder-dat

Usng yarn:

yarn add @nuskin/bynder-dat

Example usage

CommonJS

const { useFormat, transformFill } = require('@nuskin/bynder-dat');

// apply format
const url = useFormat('http://foo.baz.bar', 'webp');
console.log(url); // http://foo.baz.bar?format=webp

// transform
const url = transformFill('http://foo.baz.bar', { height: 100, width: 100 });
console.log(url); // http://foo.baz.bar?io=transform:fill,height:100,width:100;

// combination
const url = transformFill(useFormat('http://foo.baz.bar', 'webp'), { height: 100, width: 100 });
console.log(url); // http://foo.baz.bar?format=webp&io=transform:fill,height:100,width:100;

// inter-changeable
const url = useFormat(transformFill('http://foo.baz.bar', { height: 100, width: 100 }), 'webp');
console.log(url); // http://foo.baz.bar?io=transform:fill,height:100,width:100&format=webp;

ESM

import { useFormat, transformFill } from '@nuskin/bynder-dat';
// The same examples above can be performed.

Real world use cases

optimize

Using webp already reduces file size by alot

import { useFormat } from '@nuskin/bynder-dat';

// retrieve the DAT derivative - transformBaseUrl
const { transformBaseUrl } = bynderImageObject.derivatives;
const webpImage = useFormat(transformBaseUrl, 'webp');

optimize + tailor fit images

You know the dimensions of the image you need to render.

import { useFormat, transformFill } from '@nuskin/bynder-dat';

// retrieve the DAT derivative - transformBaseUrl
const { transformBaseUrl } = bynderImageObject.derivatives;
const webpThumbnailImage = transformFill(useFormat(transformBaseUrl, 'webp'), { height: 100, width: 100 });

optimize + responsive using image srcset attribute

You know the dimensions of the image you need to render.

import { useFormat, transformFill } from '@nuskin/bynder-dat';

// retrieve the DAT derivative - transformBaseUrl
const sourcesetMap = [
  { width: 320, height: 200 },
  { width: 800, height: 400 }
];
const { transformBaseUrl } = bynderImageObject.derivatives;
const imageSourceSet = sourcesetMap
  .map((dimensions) => `${transformFill(useFormat(transformBaseUrl, 'webp'), dimensions)} ${dimensions.width}w`)
  .join(',');
// "media.nuskin.com/transform/foo?format=webp&transform:fill,width:320,height:200 320w, media.nuskin.com/transform/foo?format=webp&transform:fill,width:800,height:400 800w"

Resources

• Bynder DAT Doc

License

MIT