reactjs-click-outside

an npm package for reactjs projects to handle clicks outside any react or user component

Usage no npm install needed!

<script type="module">
  import reactjsClickOutside from 'https://cdn.skypack.dev/reactjs-click-outside';
</script>

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.

Licence

MIT