@types/react-outside-click-handler/index.d.ts

TypeScript definitions for react-outside-click-handler

import * as React from "react";

declare namespace OutsideClickHandler {
    interface DefaultProps {
        /**
         * If the disabled prop is true, outside clicks will not be registered. This can be
         * utilized to temporarily disable interaction without unmounting/remounting the entire
         * tree.
         *
         * @default false
         */
        disabled: boolean;
        /**
         * If useCapture is true, the event will be registered in the capturing phase and thus,
         * propagated top-down instead of bottom-up as is the default.
         *
         * @default true
         */
        useCapture: boolean;
        /**
         * By default, the OutsideClickHandler renders a display: block <div /> to wrap the
         * subtree defined by children. If desired, the display can be set to inline-block,
         * inline, flex, or contents instead. There is no way not to render a wrapping <div />.
         *
         * @default "block"
         */
        display: "block" | "flex" | "inline" | "inline-block" | "contents";
    }

    interface Props extends Partial<DefaultProps> {
        /**
         * Since the OutsideClickHandler specifically handles clicks outside a specific subtree,
         * children is expected to be defined. A consumer should also not render the
         * OutsideClickHandler in the case that children are not defined.
         */
        children: React.ReactNode;

        /**
         * It takes the relevant clickevent as an arg and gets triggered when the user clicks
         * anywhere outside of the subtree generated by the DOM node.
         */
        onOutsideClick: (e: MouseEvent) => void;
    }
}

declare class OutsideClickHandler extends React.Component<OutsideClickHandler.Props> {
    static defaultProps: OutsideClickHandler.DefaultProps;
}

export = OutsideClickHandler;