Handle clicking away from an element -- React/Preact compatible
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
.babelrc
.gitignore
.travis.yml
Gulpfile.js
README.md
index.js
package.json

README.md

click-away

Perform an action when the user clicks away from an element of interest, such as a popup, dropdown, or modal.

Installation

# npm
npm install --save click-away

# yarn
yarn add click-away

Usage

Suppose you're working on a Modal component that renders a dialog box, and you wish to close the modal if the user clicks away.

import React from 'react';

// Not shown: CSS rules for `.modal`, `.modal-open`, `.modal-closed`

export default function Modal({isOpen, onClose, children}) {
    const className = `modal modal-${isOpen ? 'open' : 'closed'}`;
    return (
        <div className={className}>
            {children}
        </div>
    );
}

Adding behavior to close the modal is as easy as passing click-away as a ref, with a reference to the callback you wish to use:

import React from 'react';
import callOnClickAway from 'click-away';

export default function Modal({isOpen, onClose, children}) {
    const className = `modal modal-${isOpen ? 'open' : 'closed'}`;
    return (
        <div className={className} ref={callOnClickAway(onClose)}>
            {children}
        </div>
    );
}

Documentation

callOnClickAway(callback)

Returns a function you can pass as a React or Preact ref, which calls the given callback when the user clicks anywhere outside the rendered element.

For instance, if you render this:

<div ref={callOnClickAway(handler)}>Hello!</div>

then the handler function will be called any time the use clicks outside the div.

Caveats

Using component style libraries with click-away

If you're using emotion, styled-components, glamorous, or similar, keep in mind you need to pass the callback to innerRef instead of ref.

Contributing

This project uses ESLint-style commit messages.