sanderkooger
commented
2 years ago Seems i spoke too soon, Im not allowed to just PR. Hereby an updated index.d.ts
import * as React from "react";
export declare class Waypoint extends React.Component<
Waypoint.WaypointProps,
{}
> {
static above: string;
static below: string;
static inside: string;
static invisible: string;
}
declare namespace Waypoint {
interface CallbackArgs {
/*
* The position that the waypoint has at the moment.
* One of Waypoint.below, Waypoint.above, Waypoint.inside, and Waypoint.invisible.
*/
currentPosition: string;
/*
* The position that the waypoint had before.
* One of Waypoint.below, Waypoint.above, Waypoint.inside, and Waypoint.invisible.
*/
previousPosition: string;
/*
* The native scroll event that triggered the callback.
* May be missing if the callback wasn't triggered as the result of a scroll
*/
event?: Event;
/*
* The waypoint's distance to the top of the viewport.
*/
waypointTop: number;
/*
* The distance from the scrollable ancestor to the viewport top.
*/
viewportTop: number;
/*
* The distance from the bottom of the scrollable ancestor to the viewport top.
*/
viewportBottom: number;
}
interface WaypointProps {
/**
* Function called when waypoint enters viewport
* @param {CallbackArgs} args
*/
onEnter?: (args: CallbackArgs) => void;
/**
* Function called when waypoint leaves viewport
* @param {CallbackArgs} args
*/
onLeave?: (args: CallbackArgs) => void;
/**
* Function called when waypoint position changes
* @param {CallbackArgs} args
*/
onPositionChange?: (args: CallbackArgs) => void;
/**
* Whether to activate on horizontal scrolling instead of vertical
*/
horizontal?: boolean;
/**
* `topOffset` can either be a number, in which case its a distance from the
* top of the container in pixels, or a string value. Valid string values are
* of the form "20px", which is parsed as pixels, or "20%", which is parsed
* as a percentage of the height of the containing element.
* For instance, if you pass "-20%", and the containing element is 100px tall,
* then the waypoint will be triggered when it has been scrolled 20px beyond
* the top of the containing element.
*/
topOffset?: string | number;
/**
* `bottomOffset` can either be a number, in which case its a distance from the
* bottom of the container in pixels, or a string value. Valid string values are
* of the form "20px", which is parsed as pixels, or "20%", which is parsed
* as a percentage of the height of the containing element.
* For instance, if you pass "20%", and the containing element is 100px tall,
* then the waypoint will be triggered when it has been scrolled 20px beyond
* the bottom of the containing element.
*
* Similar to `topOffset`, but for the bottom of the container.
*/
bottomOffset?: string | number;
/**
* A custom ancestor to determine if the target is visible in it.
* This is useful in cases where you do not want the immediate scrollable
* ancestor to be the container. For example, when your target is in a div
* that has overflow auto but you are detecting onEnter based on the window.
*/
scrollableAncestor?: any;
/**
* If the onEnter/onLeave events are to be fired on rapid scrolling.
* This has no effect on onPositionChange -- it will fire anyway.
*/
fireOnRapidScroll?: boolean;
/**
* Use this prop to get debug information in the console log. This slows
* things down significantly, so it should only be used during development.
*/
debug?: boolean;
/**
* Since React 18 Children are no longer implied, therefore we specify them here
*/
children?: React.ReactNode;
}
}
joaomlap
ederelk
in react 18 FC typings changed and children are no longer implied, they now shoudl be typed.