Supabase Loader

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

Module import

import * as Supabase from '@lonik/oh-image/supabase'

URL Schema

The loader generates URLs following this pattern:

URL Schema

https://<project_id>.supabase.co/storage/v1/render/image/public/<src>?<params>

useSupabaseLoader

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 useSupabaseLoader

import { useSupabaseLoader } from '@lonik/oh-image/supabase';
import { Image } from '@lonik/oh-image/react'

function MyComponent() {
  const loader = useSupabaseLoader(
  {
    placeholder: {
      quality: 20,
    },
  }
  );

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

SupabaseLoaderProvider

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 SupabaseLoaderProvider

import { SupabaseLoaderProvider } from '@lonik/oh-image/supabase';

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

useSupabaseContext

Returns the global configuration of the loader.

Global Defaults

By default the loader is configured with the following properties:

Supabase Loader Default Config

  {
    placeholder: {
      quality: 20,
    },
  }
  

Global Options

Everything in transformation options in addition to:

Supabase Loader Global Options

{
  /**
   * Supabase project id.
   * Example: "project-ref"
   */
  path: string;
}

Transforms Option

Below is the transformation options for this loader.

Supabase Loader Interface

{
  /** Resize width in pixels. */
  width: number;

  /** Resize height in pixels. */
  height: number;

  /** Output quality from 20 to 100. */
  quality: number;

  /** Resize mode used by Supabase Storage. */
  resize: "cover" | "contain" | "fill";

  /**
   * Use "origin" to disable Supabase's automatic format optimization.
   */
  format: "origin";
}