Cloudflare Loader

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

Module import

import * as Cloudflare from '@lonik/oh-image/cloudflare'

URL Schema

The loader generates URLs following this pattern:

URL Schema

<path>/cdn-cgi/image/<params>/<src>

useCloudflareLoader

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 useCloudflareLoader

import { useCloudflareLoader } from '@lonik/oh-image/cloudflare';
import { Image } from '@lonik/oh-image/react'

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

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

CloudflareLoaderProvider

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 CloudflareLoaderProvider

import { CloudflareLoaderProvider } from '@lonik/oh-image/cloudflare';

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

useCloudflareContext

Returns the global configuration of the loader.

Global Defaults

By default the loader is configured with the following properties:

Cloudflare Loader Default Config

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

Transforms Option

Below is the transformation options for this loader.

Cloudflare Loader Interface

  {
     anim: boolean;
    background: string;
    blur: number;
    brightness: number;
    compression: "fast";
    contrast: number;
    dpr: number;
    flip: "h" | "v" | "hv";
    fit: "scale-down" | "contain" | "cover" | "crop" | "pad" | "squeeze";
    format: "auto" | "avif" | "webp" | "jpeg" | "baseline-jpeg";
    gamma: number;
    gravity: "auto" | "left" | "right" | "top" | "bottom" | string;
    height: number;
    width: number;
    maxWidth: number;
    metadata: "keep" | "copyright" | "none";
    quality: number | "high" | "medium-high" | "medium-low" | "low";
    rotate: number;
    sharpen: number;
    trim: [number, number, number, number];
    zoom: number;
    saturation: number;
    segment: "foreground";
    onerror: "redirect";
    "slow-connection-quality": number;
  }