reactjs-click-outside
v1.0.1
Published
an npm package for reactjs projects to handle clicks outside any react or user component
Downloads
228
Maintainers
Readme
reactjs-click-outside
reactjs-click-outside is an reactjs lightweight library, using to handle clicks outside React
and user
components
Installation
The package can be installed via npm :
npm install --save reactjs-click-outside
Configuration
. In order to use this component, you need to import {ClickOutside}
in your js file, and then wrap the desired component :
import { ClickOutside } from 'reactjs-click-outside';
....
function ComponentUsingThis () {
return (
.....
<ClickOutside outsideCall={()=> alert('click outside the red container')}>
<div
style={{ height: "500px", width: "500px", backgroundColor: "red" }}
onClick={() => console.log("CLICKED CONTAINER RED")}
/>
</ClickOutside>
)
}
export default ComponentUsingThis;
- The ClickOutside
will be removed, if you use Inspect Element tool, when inspecting your HTML
code, you will notice that the html tag doesn't show up, because ClickOutside
clone the child component, so none other component is added to the DOM.
- All you props
and style
goes on the child component of ClickOutside
.
- Use outsideCall
to pass reference to method you wanna excute when the user clicks outside your wraped component.