react-framage/dist/index.d.ts

Display portions of an image, flipbook animate between them and apply nineslice scaling!

import { JSX, RefObject } from 'react';

declare class ReactFramageElement extends HTMLElement {
    /** A boolean value representing whether the Framage has nine slice scaling applied. */
    get ninesliced(): boolean;
    set ninesliced(value: boolean);
    /** A method to set the `--fallback-` CSS properties of the Framage. */
    setFallbackSize(width: number, height: number, nineslice?: {
        top: number;
        left: number;
        bottom: number;
        right: number;
    }): void;
}

declare class ReactFramageSliceElement extends HTMLElement {
}

declare module "react" {
    namespace JSX {
        interface IntrinsicElements {
            /** Wrapper element for the `<Framage>` component. */
            "react-framage": React.DetailedHTMLProps<React.HTMLAttributes<ReactFramageElement>, ReactFramageElement> & {
                ninesliced?: boolean;
                frame?: number;
                steps?: number;
            };
            "react-framage-slice": React.DetailedHTMLProps<React.HTMLAttributes<ReactFramageSliceElement>, ReactFramageSliceElement>;
        }
    }
}
interface FramageProps extends Omit<JSX.IntrinsicElements["img"], "ref"> {
    /**
      Visible portion of source image.
      
      @version 4.0.0
      @see https://npmjs.com/package/react-framage#framagenineslice
    */
    view: FramageView;
    /**
      Enable 9-slice scaling for this Framage. Configures the width of the outer area with limited scaling.
      
      @version 4.0.0
      @see https://npmjs.com/package/react-framage#framagenineslice
    */
    nineslice?: FramageNineslice;
    /**
      Framage animation configuration.
      
      @version 4.0.0
      @see https://npmjs.com/package/react-framage#framageanimation
    */
    animation?: FramageAnimation;
}
interface FramageView {
    /** Width of portion in pixels, relative to source. */
    width: number;
    /** Height of portion in pixels, relative to source. */
    height: number;
    /** Offset of portion from the left in pixels, relative to source. */
    left?: number;
    /** Offset of portion from the top in pixels, relative to source. */
    top?: number;
}
type FramageNineslice = number | {
    /** Width of top border in pixels, relative to source. */
    top?: number;
    /** Width of left border in pixels, relative to source. */
    left?: number;
    /** Width of bottom border in pixels, relative to source. */
    bottom?: number;
    /** Width of right border in pixels, relative to source. */
    right?: number;
};
interface FramageAnimation {
    /** Animation's frame configuration.
     * - Set to an array of numbers to configure timeline of steps. Each item represents the amount of `step`s taken across the source image.
     * - Set to a number to move one `step` at a time for the specified amount of frames.
     */
    frames: number | number[];
    /** Frame index to start animation at. */
    initial?: number;
    /** Number of pixels until next frame, relative to source image (usually same as view width/height). */
    step: number;
    /** Direction the view portion moves in for each `step`. */
    orientation: "horizontal" | "vertical";
    /** Amount of frames to cycle through per second (frames per second). */
    fps: number;
    /** Whether animation should repeat. */
    loop?: boolean;
    /** Whether component should remove itself when animation ends. */
    destroy?: boolean;
    /** Restarts animation when value is updated. */
    key?: any;
    /** Function to run on the first frame. */
    onStart?(): void;
    /** Function to run at the end of the last frame. */
    onEnd?(): void;
    /** Function to run every frame change. */
    onChange?(frame: number): void;
}

/**
 Display portions of an image, flipbook animate between them and apply nineslice scaling!

 @version 4.0.0
 @see https://npmjs.com/package/react-framage
 */
declare function Framage(props: FramageProps): JSX.Element | null;

/**
  A custom hook used by `<Framage>`.

  Returns an array containing the current frame index, amount of steps taken and a boolean representing whether the Framage is destroyed.
  
  @version 4.0.0
  @see https://npmjs.com/package/react-framage#useframageanimation
 */
declare function useFramageAnimation(animation?: FramageAnimation): [number, number, boolean];

/**
  A custom hook used by `<Framage>`.

  Controls the scaling and positioning on the `<img>` element.
  
  @version 4.0.0
  @see https://npmjs.com/package/react-framage#useframageimage
 */
declare function useFramageImage(wrapper: RefObject<HTMLElement | null>, image: RefObject<HTMLImageElement | null>, data: {
    animation?: FramageAnimation;
    frame: number;
    steps: number;
    view: FramageView;
}): void;

export { Framage, ReactFramageElement, ReactFramageSliceElement, Framage as default, useFramageAnimation, useFramageImage };
export type { FramageAnimation, FramageNineslice, FramageProps, FramageView };