react-clickout
Higher Order Component providing clickout functionality for React components.
Last updated 2 years ago by danielmoi .
Apache-2.0 · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-clickout 
SYNC missed versions from official npm registry.

React Clickout

Higher Order Component providing clickout functionality for React components.

Build Status npm version

Installation

With Yarn:

yarn add react-clickout

With NPM:

npm install react-clickout

Usage

react-clickout returns a Higher Order Component that wraps a provided component with the ability to detect a click event outside of that component.

Such a "clickout" event will call the wrapped component's handleClickout method. (Note the character casing.)

See the test suite for more detailed example usage.

import React, { Component } from 'react';
import wrapWithClickout from 'react-clickout';

class ToWrap extends Component {
  constructor() {
    ...
    this.state = {
      isVisible: true,
    };
  }
  handleClickout() {
    this.setState({
      isVisible: false,
    });
  }

  toggleVisible() {
    this.setState({
      isVisible: !this.state.isVisible,
    });
  }

  render() {
    return (
      <div className="to-wrap__container">

        {this.state.isVisible
          ?
            <div className="box" />
          :
            null
        }

        <button onClick={this.toggleVisible} >
          Toggle Box
        </button>

      </div>
    );
  }
}

export default wrapWithClickout(ToWrap);

Excluding elements from calling handleClickout

  • it is possible to prevent the handleClickout method from being called
  • the elements (outside the component wrapped with react-clickout) to be excluded should be marked with the data-react-clickout attribute with the value exclude
<div data-react-clickout="exclude" />

Details

  • React Clickout uses higher order functions (instead of using mixins)
  • React Clickout also uses callback refs (instead of ReactDOM.findDOMNode) (which will eventually be deprecated (see here and here))

Tests

With Yarn:

yarn run test

With NPM:

npm run test

Credits

Initially a fork from react-click-outside.

Thanks to Dan Abramov for the solution of using callback refs.

Licence

Apache-2.0

Current Tags

  • 3.0.8                                ...           latest (2 years ago)

31 Versions

  • 3.0.8                                ...           2 years ago
  • 3.0.7                                ...           2 years ago
  • 3.0.6                                ...           2 years ago
  • 3.0.5                                ...           2 years ago
  • 3.0.4                                ...           2 years ago
  • 3.0.3                                ...           2 years ago
  • 3.0.2                                ...           2 years ago
  • 3.0.0                                ...           2 years ago
  • 2.4.3                                ...           2 years ago
  • 2.4.2                                ...           2 years ago
  • 2.4.1                                ...           2 years ago
  • 2.4.0                                ...           2 years ago
  • 2.3.0                                ...           3 years ago
  • 2.2.0                                ...           3 years ago
  • 2.1.2                                ...           4 years ago
  • 2.1.1                                ...           4 years ago
  • 2.1.0                                ...           4 years ago
  • 2.0.5                                ...           4 years ago
  • 2.0.4                                ...           4 years ago
  • 2.0.3                                ...           4 years ago
  • 2.0.1                                ...           4 years ago
  • 1.0.13                                ...           4 years ago
  • 1.0.11                                ...           4 years ago
  • 1.0.10                                ...           4 years ago
  • 1.0.9                                ...           4 years ago
  • 1.0.8                                ...           4 years ago
  • 1.0.7                                ...           4 years ago
  • 1.0.6                                ...           4 years ago
  • 1.0.5                                ...           4 years ago
  • 1.0.4                                ...           4 years ago
  • 1.0.0                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (0)
None

Copyright 2014 - 2017 © taobao.org |