react-clickout
v3.0.8
Published
Higher Order Component providing clickout functionality for React components.
Downloads
1,668
Readme
React Clickout
Higher Order Component providing clickout functionality for React components.
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 thedata-react-clickout
attribute with the valueexclude
<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.