filestack-adaptive/build/module/tree.d.ts

HTML5 picture elements powered by Filestack

import { TransformOptions } from 'filestack-js';
export interface FileLinkOptions {
    transform: TransformOptions;
    useValidator?: boolean;
    indexInSet?: number;
    cname?: string;
}
export interface FileHandleByStorageAlias {
    srcHandle: string;
    apiKey: string;
}
export declare type FileHandle = string | FileHandleByStorageAlias;
export interface Img {
    alt?: string;
    sizes?: string;
    src: string;
    srcset?: string;
    width?: string;
}
export interface Source {
    media?: string;
    sizes?: string;
    srcset: string;
    type?: string;
}
export interface Picture {
    img: Img;
    sources?: Source[];
}
export interface Size {
    [mediaquery: string]: string;
}
export interface Security {
    policy: string;
    signature: string;
}
export interface PictureOptions {
    /**
     * Set if should use validator for params task
     */
    useValidator?: boolean;
    /**
     * Alt name for image element.
     */
    alt?: string;
    /**
     * Array of image types, e.g. ['jpg', 'webp'].
     */
    formats?: string[];
    /**
     * Toggle setting key attribute on sources. Useful for React.
     * Defaults to true.
     */
    keys?: boolean;
    /**
     * Resolution descriptors. Defaults to a sensible range
     * between 180w and 3024w. Can also be numbers representing widths
     * or strings representing pixel densities, e.g. ['1x', '2x'].
     */
    resolutions?: (string | number)[];
    /**
     * Object containing Filestack security policy and signature.
     */
    security?: Security;
    /**
     * Object of sizes and their media query hints.
     * Note: A fallback for img sizes is highly recommended.
     * For example:
     * ```js
     * sizes: {
     *   '(min-width: 1280px)': '50vw',
     *   '(min-width: 640px)': '60vw',
     *   fallback: '100vw',
     * }
     * ```
     */
    sizes?: Size;
    /**
     * Static width to use for img with optional pixel density support.
     */
    width?: string;
    /**
     * Use custom cname for generated filelinks.
     */
    cname?: string;
    /**
     * Image transformations options
     *
     * @see https://www.filestack.com/docs/image-transformations
     */
    transforms?: TransformOptions;
}
/**
 * Represent a picture element as a tree where leaf nodes are attributes
 * of one img element and zero or more source elements.
 *
 * This allows passing the structure into hyperscript-like virtual DOM generators.
 * For example see https://github.com/choojs/hyperx
 */
export declare const makePictureTree: (handle?: string | FileHandleByStorageAlias | undefined, opts?: PictureOptions | undefined) => Picture;