Nonstop Progressive Marxism

    react-click-outside-hook
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-click-outside-hook package

    1.1.1 • Public • Published

    react-click-outside-hook 🎣

    Version Badge GZipped size Build Status Coverage Status License Downloads styled with prettier

    React Hook implementation with click outside functionality.

    Features

    • 👆 Support for pointer and touch events
    • 🎣 Made with 💖 by React Hooks - Easy to use API thanks to React Hooks
    • 💥 Tiny bundle ~850 bytes gzipped

    Installation

    Install using Yarn:

    yarn add react-click-outside-hook

    or NPM:

    npm install react-click-outside-hook --save

    Usage 🎣

    useClickOutside

    const [ref, hasClickedOutside] = useClickOutside()

    The new React Hooks make it easier than ever to monitor the hasClickedOutside state of your components. Call the useClickOutside hook which will return an array containing a ref and the hasClickedOutside status. Simply assign the ref to the DOM element you want to monitor and the hook will report the status.

    import React from 'react'
    import { useClickOutside } from 'react-click-outside-hook'
     
    function Component() {
      const [ref, hasClickedOutside] = useClickOutside()
      return <div ref={ref}>{hasClickedOutside.toString()}</div>
    }

    Install

    npm i react-click-outside-hook

    DownloadsWeekly Downloads

    6,395

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    19.2 kB

    Total Files

    7

    Last publish

    Collaborators

    • bdelo