Skip to content
πŸŒ€ ES7 class decorator or higher-order component for React for listening to clicks outside of the component.
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.
dist
src
.gitignore
LICENSE
README.md
package.json

README.md

React Outside

npm React Version npm npm

Wraps a react component and listens for clicks outside of the element.

Can be used as a higher-order component or as an ES7 class decorator

Installation

  npm i react-outside

API

clickOutside([config])(MyComponent)

Parameters

  • config object
    • config.events array

Examples

// ES7
import React from 'react';
import clickOutside from 'react-outside';

@clickOutside() // Enhanced component
class MyComponent extends React.Component {
    handleClickOutside() {
        // Handle the event
    }
    render() {
        <ul className="dropdown-menu">
            <li>List items...</li>
        </ul>
    }
}

export default MyComponent; // Component is exported with `clickOutside` decorator
// ES5
var React = require('react');
var clickOutside = require('react-outside');

class MyComponent extends React.Component {
    handleClickOutside() {
        // Handle the event
    }
    render() {
        <ul className="dropdown-menu">
            <li>List items...</li>
        </ul>
    }
}

export default clickOutside()(MyComponent); // Enhanced component
You can’t perform that action at this time.