react-click-boundary

    0.2.2 • Public • Published

    Twitter Follow Version MIT license


    This is a React component that helps you listen for clicks outside your element. Classic use cases for such a component are

    • closing a dropdown when clicking outside
    • closing a modal when clicking outside
    • canceling inline editing when clicking outside

    How is this better than the alternatives?

    1. It has a better name 😃 Most of the alternative names are using verbs (react-click-outside or react-onclickoutside). I think that the component names should be using nouns and that's why this is called react-click-boundary.

    2. It's not a Higher Order Component. The alternatives which are build as HOCs allow you to handle the events but only outside of your component. You wrap your component in their HOC and only the parent component can register a handler.

    3. It doesn't add new DOM elements. Some of the alternatives add a <div> wrapper around your elements. This component doesn't do that, instead it uses your outermost element as a boundary.

    In short: it has a better name, it's not a HOC and it doesn't add unnecesary DOM elements.

    Installation

    npm install react-click-boundary --save

    Example

    import React from 'react'
    import ClickBoundary from 'react-click-boundary'
     
    class Modal extends React.Component {
      render() {
        return (
          <ClickBoundary onClickOutside={() => alert('yes!')}>
            <div className="modal">
              Content
            </div>
          </ClickBoundary>
        )
      }
    }
     
    export default Modal

    Change Log

    0.1.0 (2017-12-04) initial release

    Contributing

    Before you submit a pull request, please take the following actions.

    1. Open an issue describing the contribution you would like to make
    2. Discuss until we all agree that your idea is useful for the project
    3. Create a pull request but make sure you follow the style guide and the tests pass
    4. Voila! You've done an amazing job.

    Credits

    • Hexbridge for sponsoring my open-source work.

    License

    MIT @ Andrei Canta

    Install

    npm i react-click-boundary

    DownloadsWeekly Downloads

    4

    Version

    0.2.2

    License

    MIT

    Last publish

    Collaborators

    • deiucanta