Kontent Loader

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

Module import

import * as Kontent from '@lonik/oh-image/kontent'

URL Schema

The loader generates URLs following this pattern:

URL Schema

<path>/<src>?<params>

useKontentLoader

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 useKontentLoader

import { useKontentLoader } from '@lonik/oh-image/kontent';
import { Image } from '@lonik/oh-image/react'

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

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

KontentLoaderProvider

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 KontentLoaderProvider

import { KontentLoaderProvider } from '@lonik/oh-image/kontent';

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

useKontentContext

Returns the global configuration of the loader.

Global Defaults

By default the loader is configured with the following properties:

Kontent Loader Default Config

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

Transforms Option

Below is the transformation options for this loader.

Kontent Loader Interface

{
  w?: number;

  h?: number;

  dpr?: number;

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

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

  "fp-x"?: number;
  "fp-y"?: number;
  "fp-z"?: number;

  smart?: boolean | "face" | "edges" | "objects";

  bg?: string;

  fm?: "webp" | "jpg" | "png" | "gif" | "avif" | "jp2";

  q?: number;

  lossless?: boolean;

  auto?: "format" | "compress" | "enhance";
  }