@dnb/eufemia/components/height-animation/useHeightAnimation.d.ts

DNB Eufemia Design System UI Library

import type { ReactNode, RefObject } from 'react';
import HeightAnimationInstance from './HeightAnimationInstance';
export type UseHeightAnimationOptions = {
    /**
     * Set to `true` on second re-render when the view should animate from 0px to auto. Defaults to `true`.
     */
    open?: boolean;
    /**
     * Set to `false` to omit the animation. Defaults to `true`.
     */
    animate?: boolean;
    /**
     * To compensate for CSS gap between the rows, so animation does not jump during the animation. Provide a CSS unit or `auto`. Defaults to `null`.
     */
    compensateForGap?: string | 'auto';
    /**
     * In order to let the Hook know when children has changed
     */
    children?: ReactNode | HTMLElement;
    /**
     * Is called once before mounting the component (useLayoutEffect). Returns the instance of the internal animation class.
     */
    onInit?: (instance: HeightAnimationInstance) => void;
    /**
     * Is called when fully opened or closed. Returns `true` or `false` depending on the state.
     */
    onOpen?: (isOpen: boolean) => void;
    /**
     * Is called when animation has started. The first parameter is a string. Depending on the state, the value can be `opening`, `closing` or `adjusting`.
     */
    onAnimationStart?: (state: HeightAnimationOnStart) => void;
    /**
     * Is called when animation is done and the full height is reached. The first parameter is a string. Depending on the state, the value can be `opened`, `closed` or `adjusted`.
     */
    onAnimationEnd?: (state: HeightAnimationOnEnd) => void;
};
export type HeightAnimationOnStart = 'opening' | 'closing' | 'adjusting';
export type HeightAnimationOnEnd = 'opened' | 'closed' | 'adjusted';
export declare function useHeightAnimation(targetRef: RefObject<HTMLElement>, { open, animate, children, compensateForGap, onInit, onOpen, onAnimationStart, onAnimationEnd, }?: UseHeightAnimationOptions): {
    open: boolean;
    isOpen: boolean;
    isInDOM: boolean;
    isVisible: boolean;
    isVisibleParallax: boolean;
    isAnimating: boolean;
    firstPaintStyle: {
        readonly visibility: "hidden";
        readonly opacity: "0";
        readonly height: "auto";
    } | Record<string, never>;
};