@kohlmannj/react-scroll-percentage/dist/ScrollPercentageCalculator.d.ts

Monitor the scroll percentage of a component inside the viewport, using the IntersectionObserver API.

import { IntersectionObserverProps, IntersectionObserverRenderProps } from '@kohlmannj/react-intersection-observer';
import { PureComponent } from 'react';
import { IScrollPercentageObserverOwnProps } from './ScrollPercentageObserver';
export declare type ScrollPercentageCalculatorProps = IntersectionObserverRenderProps & Pick<IntersectionObserverProps, 'rootMargin' | 'root' | 'threshold'> & IScrollPercentageObserverOwnProps;
export interface IScrollPercentageCalculatorState {
    percentage: number;
    percentageOfViewport: number;
}
/**
 * Monitors scroll, and triggers the children function with updated props
 *
 * <ScrollPercentage>
 * {({inView, percentage}) => (
 *   <h1>{`${inView} {percentage}`}</h1>
 * )}
 * </ScrollPercentage>
 */
export declare class ScrollPercentageCalculator extends PureComponent<ScrollPercentageCalculatorProps, IScrollPercentageCalculatorState> {
    static defaultProps: {
        threshold: number;
    };
    /**
     * Get the correct viewport height. If rendered inside an iframe, grab it from the parent
     */
    static viewportHeight(): number;
    static getRootMarginOffsetTerm({ value, unit }: {
        value: number;
        unit: string;
    }, length: number): number;
    static calculatePercentages(bounds: ClientRect, rootMargin: IntersectionObserverProps['rootMargin'], threshold?: number): IScrollPercentageCalculatorState;
    state: IScrollPercentageCalculatorState;
    componentDidMount(): void;
    componentDidUpdate(prevProps: ScrollPercentageCalculatorProps, // tslint:disable-line variable-name
    prevState: IScrollPercentageCalculatorState): void;
    componentWillUnmount(): void;
    monitorScroll(enable: boolean): void;
    handleScroll: () => void;
    render(): {} | null;
}
//# sourceMappingURL=ScrollPercentageCalculator.d.ts.map