Imgix Loader

This integration allows you to use Imgix for image optimization. For more details, refer to the official documentation.

Module import

import * as Imgix from '@lonik/oh-image/imgix'

URL Schema

The loader generates URLs following this pattern:

URL Schema

<path>/<src>?<params>

useImgixLoader

The primary hook for generating the loader function. It accepts configuration options (including transforms and placeholder settings) and returns a function that generates the final image URL. Pass this result to the loader prop of the Image component.

Using useImgixLoader

import { useImgixLoader } from '@lonik/oh-image/imgix';
import { Image } from '@lonik/oh-image/react'

function MyComponent() {
  const loader = useImgixLoader(
  {
    transforms: {
      auto: "format,compress",
    },
    placeholder: {
      q: 10,
      auto: "format,compress",
    },
  }
  );

  return (
    <Image
      src="image.jpg"
      width={500}
      loader={loader}
      placeholder={true}
    />
  );
}

ImgixLoaderProvider

A Context Provider that configures global options for all child components using this loader. This is the recommended way to set the base path/URL and default transforms.

Configuring ImgixLoaderProvider

import { ImgixLoaderProvider } from '@lonik/oh-image/imgix';

function App() {
  return (
    <ImgixLoaderProvider
      path="https://example.com/images"
      transforms={OPTIONS}
      placeholder={PLACEHOLDER_OPTIONS}
    >
      <MyApp />
    </ImgixLoaderProvider>
  );
}

useImgixContext

Returns the global configuration of the loader.

Global Defaults

By default the loader is configured with the following properties:

Imgix Loader Default Config

  {
    transforms: {
      auto: "format,compress",
    },
    placeholder: {
      q: 10,
      auto: "format,compress",
    },
  }
  

Transforms Option

Below is the transformation options for this loader.

Imgix Loader Interface

{
  w?: number;

  h?: number;

  ar?: string;

  fit?:
    | "clamp"
    | "clip"
    | "crop"
    | "facearea"
    | "fill"
    | "fillmax"
    | "max"
    | "min"
    | "scale";

  crop?: string;

  dpr?: number;

  q?: number;

  fm?:
    | "jpeg"
    | "jpg"
    | "png"
    | "webp"
    | "avif"
    | "gif"
    | "json"
    | "mp4"
    | "webm"
    | "pjpg"
    | "jp2"
    | "jxr"
    | "png8"
    | "png32"
    | "blurhash";

  auto?:
    | "true"
    | "format"
    | "compress"
    | "enhance"
    | "redeye"
    | string;

  con?: number;

  exp?: number;

  sat?: number;

  blur?: number;

  sharp?: number;

  sepia?: number;

  bg?: string;

  border?: string;

  txt?: string;

  txtFont?: string;

  txtColor?: string;

  txtSize?: number;

  txtAlign?: "center" | "left" | "right";

  mark?: string;

  markAlpha?: number;

  rot?: number;

  flip?: "h" | "v" | "hv";

  gaussblur?: number;

  noise?: number;

  strip?: boolean;

  rect?: [number, number, number, number];

  "fp-x"?: number;

  "fp-y"?: number;

  "fp-z"?: number;

  lossless?: boolean;

  invert?: boolean;

  gam?: number;
  }