reveal-on-scroll-react/dist/index.d.ts

Add scroll animation to your React application super fast!

import { ReactNode, CSSProperties, FC } from 'react';
import { Easing } from 'framer-motion';

declare const htmlElements: readonly ["p", "h1", "h2", "h3", "h4", "h5", "h6", "strong", "em", "blockquote", "cite", "q", "div", "ul", "li"];

type UnionStringArray<T extends Readonly<string[]>> = T[number];
/**
 * Defines the animation preset
 */
type Animation = "fade-in" | "slide-in-bottom" | "slide-in-right" | "slide-in-left";
/**
 * Defines the supported html tags
 */
type HTMLElements = UnionStringArray<typeof htmlElements>;
/**
 * Defines the properties of the animation component
 */
interface IScrollReveal {
    children: ReactNode;
    /**
     * Specify the animation preset
     * default: "fade-in"
     */
    animation?: Animation;
    style?: CSSProperties;
    className?: string;
    /**
     * Configure the viewport threshold, i.e. how much a user has
     * to scroll into the view so that the animation gets triggert.
     * This is a value between 0 and 1. Whereas 0 triggers the animation
     * instantly.
     * default: 0.5
     */
    threshold?: number;
    /**
     * How long should the animation take
     */
    duration?: number;
    /**
     * Change the easing function
     * default: "easeOut"
     */
    easing?: Easing;
    /**
     * Configure whether the animation should be
     * triggered after a delay
     * default: 0
     */
    delay?: number;
    /**
     * Change the initial value of the animation. E.g.
     * you can increse the offset of a slide in animation, which is
     * 100 or -100 in this case.
     */
    value?: number;
}

/**
 * Replace this component with your regular html tags
 * @example <ScrollReveal.p
 *  animation="slide-in-bottom"
 * >
 * Hello World
 * </ScrollReveal.p>
 */
declare const ScrollReveal: {
    p: FC<IScrollReveal>;
    h1: FC<IScrollReveal>;
    h2: FC<IScrollReveal>;
    h3: FC<IScrollReveal>;
    h4: FC<IScrollReveal>;
    h5: FC<IScrollReveal>;
    h6: FC<IScrollReveal>;
    strong: FC<IScrollReveal>;
    em: FC<IScrollReveal>;
    blockquote: FC<IScrollReveal>;
    cite: FC<IScrollReveal>;
    q: FC<IScrollReveal>;
    div: FC<IScrollReveal>;
    ul: FC<IScrollReveal>;
    li: FC<IScrollReveal>;
};

export { Animation, HTMLElements, IScrollReveal, ScrollReveal };