@moda/imgsrc

Meta

• State: production
• Point people: @jmcriffey

What is This?

This module provides a set of functions to assist in turning our asset URLs for images into URLs configured for our image resizing proxy.

This involves the following steps, generally:

• Given an image url: https://assets11.modaoperandi.com/images/products/672299/272179/large_alexander-mcqueen-black-leather-chelsea-boots.jpg?_t=1568194811 and some parameters { width: 200, height: 250 }
• Replace the host with the specified modaImgRoot:
  • https://assets11.modaoperandi.com becomes https://cdn.modaoperandi.com
• Replace the path:
  • /assets/ becomes /img/
• Append any parameters into the query string, preserving any existing and sorting them in alphabetical order
  • ?_t=1568194811 becomes ?_t=1568194811&h=250&operation=resize&w=200

This module provides the functions to handle this as well as support for configuring those functions without having to thread props into every component through the use of a context store.

Getting started

yarn add @moda/imgsrc

Configuration

| Option | Description | Type | Default | | ------------- | ---------------------------------------------------------- | ----------- | -------------------------------- | | strategy | Underlying image proxy service | 'modaImg' | 'modaImg' | | modaImgRoot | Underlying root host for modaImg strategy | string | 'https://cdn.modaoperandi.com' | | isDisabled | Whether or not to disable all strategies and return inputs | boolean | true |

Usage

Note: the functions are disabled by default

Import and wrap your application with the provider:

import { ImgSrcProvider } from "@moda/imgsrc";

const Wrapped = () => (
  <ImgSrcProvider
    configuration={{
      modaImgRoot: "https://cdn.modaoperandi.com",
      isDisabled: false,
    }}
  >
    <App />
  </ImgSrcProvider>
);

Elsewhere in your application, import the hook and pull out relevant functions:

import { useImgSrc } from "@moda/imgsrc";

const Image = ({ src }) => {
  const { resize } = useImgSrc();

  return (
    <img
      src={resize({ src, width: 250, height: 250, dpr: 1.0, quality: 75 })}
      alt="thumb"
    />
  );
};

The hook will provide configured resize and raw functions.

resize

type ResizeRequired = {
  src: string;
  width: number;
  height: number;
};

type ResizeEffects = {
  quality?: number | string;
  dpr?: number;
  format?: "jpg" | "webp";
};

raw

type RawRequired = {
  src: string;
};

type RawEffects = {
  quality?: number | string;
  format?: "jpg" | "webp";
};

Usage without context/hooks

The resize and raw functions can also be configured and used directly, for situations in which a hook is not appropriate or possible:

const configuredResize = resize({
  modaImgRoot: "https://cdn-integration.modaoperandi.com",
});

configuredResize({ src, width: 250, height: 250 });