Numerous Panicky Mimes

    outside-click-wrapper
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.2 • Public • Published

    outside-click-wrapper

    LICENSE SIZE npm

    outside-click-wrapper is a light-weight react component that detects the click events occurring outside of wrapped elements.

    Installation

    npm install outside-click-wrapper
    Edit zd78v

    Usage

    Default Example

    import React, { Component } from "react";
    import { OutsideClickWrapper } from "outside-click-wrapper";
    
    export default class DropdownOption extends Component {
      render() {
        return (
          <OutsideClickWrapper
            onOutsideClick={() => console.log("clicked outside of this element")}
          >
            <div className="dropdwon-container">
              <li> 1st option </li>
              <li> 2nd option </li>
            </div>
          </OutsideClickWrapper>
        );
      }
    }

    Example without extra div

    import React, { Component } from "react";
    import { OutsideClickWrapper } from "outside-click-wrapper";
    
    /**
     * In this example inner div wrapping li elements is discarded
     * meaning outside-click-wrapper can itself act as a container for wrapped
     * elements
     */
    
    export default class DropdownOption extends Component {
      render() {
        return (
          <OutsideClickWrapper
            className="dropdwon-container"
            onOutsideClick={() => console.log("clicked outside of this element")}
          >
            <li> 1st option </li>
            <li> 2nd option </li>
          </OutsideClickWrapper>
        );
      }
    }

    Props

    className?: string;

    The className property is used to set the custom className of the component.

    style?: { [key: string]: string };

    The style property is used to set the custom style of the component.

    Callback

    onOutsideClick?: OutsideClickCallback;

    The OutsideClickCallback returns the MouseEvent.

    export type OutsideClickCallback = (e: MouseEvent | TouchEvent) => void;

    onClick?: OnClickCallback;

    The OnClickCallback returns the MouseEvent. This comes handy when the component itself acts as a container.

    export type OnClickCallback = (e: MouseEvent | TouchEvent) => void;

    Changelog

    v1.1.1

    • callback returns MouseEvents

    Contributing

    Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

    License

    outside-click-wrapper is licensed under MIT License

    Install

    npm i outside-click-wrapper

    DownloadsWeekly Downloads

    1

    Version

    1.2.2

    License

    MIT

    Unpacked Size

    13.7 kB

    Total Files

    10

    Last publish

    Collaborators

    • devendrasaroj