react-outside

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

Related Repositories

react-click-outside

react-click-outside

ClickOutside component for React. ...

relay-sink

relay-sink

Use Relay to fetch and store data outside of a React component ...

react-relative-portal

react-relative-portal

React component for place dropdowns outside overflow: hidden; elements ...

react-event

react-event

Declarative way to handle events outside / inside of React Component. ...

react-click-outside

react-click-outside

Higher Order Component that provides click outside functionality ...


Top Contributors

danbovey