useImage

Hook that load an image in the browser

browser

test coverage

Last changed: last month

Installation

Library

CLI

Manual

import { useImage } from '@siberiacancode/reactuse';

Usage

const { data, isLoading, isError, isSuccess, error, refetch, isRefetching } = useImage('https://example.com/image.png');

Demo

source

Api

Parameters

Name	Type	Default	Note
src	string	-	The source of the image
options.srcset?	string	-	The srcset of the image
options.sizes?	string	-	The sizes of the image
options.alt?	string	-	The alt of the image
options.class?	string	-	The class of the image
options.loading?	HTMLImageElement['loading']	-	The loading of the image
options.crossorigin?	string	-	The crossorigin of the image
options.referrerPolicy?	HTMLImageElement['referrerPolicy']	-	The referrerPolicy of the image
useQueryOptions.keys?	DependencyList	-	The dependencies for the hook
useQueryOptions.onSuccess?	(data: Data) => void	-	The callback function to be invoked on success
useQueryOptions.onError?	(error: Error) => void	-	The callback function to be invoked on error
useQueryOptions.refetchInterval?	number	-	The refetch interval
useQueryOptions.retry?	boolean | number	-	The retry count of requests

Returns

UseImageReturn

Type declaration

import type { UseQueryOptions, UseQueryReturn } from '../useQuery/useQuery';

export interface UseImageOptions {
  /** The alt of the image */
  alt?: string;
  /** The class of the image */
  class?: string;
  /** The crossorigin of the image */
  crossorigin?: string;
  /** The loading of the image */
  loading?: HTMLImageElement['loading'];
  /** The referrer policy of the image */
  referrerPolicy?: HTMLImageElement['referrerPolicy'];
  /** The sizes of the image */
  sizes?: string;
  /** The srcset of the image */
  srcset?: string;
}

export type UseImageReturn = UseQueryReturn<HTMLImageElement>;

Source

Source • Demo

Contributors

D

debabin