retro-react/dist/cjs/components/pixelatedimage/PixelatedImage.d.ts

A React component library for building retro-style websites

/** @jsxImportSource theme-ui */
import { CSSProperties } from 'react';
export interface PixelatedImageProps extends React.ImgHTMLAttributes<HTMLCanvasElement> {
    /**
     * The image source.
     *
     */
    src: string;
    /**
     * The size of the pixelation blocks as a percentage of the image dimensions.
     * A higher value results in a image with more pixels (higher resolution).
     * Recommended range: 1 to 50.
     *
     * @default 50
     */
    blockSize?: number;
    /**
     * The width of the image. You have to explicitly set this value since it controls the canvas width.
     *
     * @default 600
     */
    width?: number;
    /**
     * The height of the image. You have to explicitly set this value since it controls the canvas height.
     *
     * @default 600
     */
    height?: number;
    /**
     * The style of the image. Used instead of the `sx` prop.
     *
     * @default undefined
     */
    style?: CSSProperties;
}
/**
 * A component that pixelates an image. The image is drawn on a canvas element resulting in a pixelated image.
 * It is not a standard img element and does not support the same props.
 *
 * @example
 * <PixelatedImage src="https://picsum.photos/id/91/600/600" blockSize={5} width={600} height={600} />
 */
export declare const PixelatedImage: import("react").ForwardRefExoticComponent<PixelatedImageProps & import("react").RefAttributes<HTMLCanvasElement>>;