npm package: @moda/imgsrc
Description: [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![](https://img.shields.io/npm/v/@moda/imgsrc/latest.svg)](https://www.npmjs.com/package
Latest version: 7.1.1

# @moda/imgsrc

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![](https://img.shields.io/npm/v/@moda/imgsrc/latest.svg)](https://www.npmjs.com/package/@moda/imgsrc)

## Meta

- **State**: production
- **Point people**: [@jmcriffey](https://github.com/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

```bash
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:

```tsx
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:

```tsx
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`

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

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

### `raw`

```tsx
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:

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

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