
 
I'm looking for a way to detect if a click event happened outside of a component, as described in this [article](https://css-tricks.com/dangers-stopping-event-propagation/). jQuery closest() is used to see if the target from a click event has the dom element as one of its parents. If there is a match the click event belongs to one of the children and is thus not considered to be outside of the component.
So in my component, I want to attach a click handler to the window. When the handler fires I need to compare the target with the dom children of my component.
The click event contains properties like "path" which seems to hold the dom path that the event has traveled. I'm not sure what to compare or how to best traverse it, and I'm thinking someone must have already put that in a clever utility function... No? 

The following solution uses ES6 and follows best practices for binding as well as setting the ref through a method.
To see it in action:

1 [Hooks Implementation](https://codesandbox.io/s/outside-alerter-hooks-lmr2y?module=%2Fsrc%2FOutsideAlerter.js)

2 [Class Implementation After React 16.3](https://codesandbox.io/s/outside-alerter-react-16-3-0-bn267m?file=/src/OutsideAlerter.js)

3[Class Implementation Before React 16.3](https://codesandbox.io/s/30q3mzjv91?module=%2Fsrc%2FOutsideAlerter.js) 

## Hooks Implementation:  

```js 
import React, { useRef, useEffect } from "react";

/**
 * Hook that alerts clicks outside of the passed ref
 */function useOutsideAlerter(ref) {
  useEffect(() => {
    /**
     * Alert if clicked on outside of element
     */ function handleClickOutside(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        alert("You clicked outside of me!");
      }
    }
    // Bind the event listener document.addEventListener("mousedown", handleClickOutside);
    return () => {
      // Unbind the event listener on clean up document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref]);
}

/**
 * Component that alerts if you click outside of it
 */export default function OutsideAlerter(props) {
  const wrapperRef = useRef(null);
  useOutsideAlerter(wrapperRef);

  return <div ref={wrapperRef}>{props.children}</div>;
} 
```

## Class Implementation 
__After 16.3__
 
```js 
import React, { Component } from "react";

/**
 * Component that alerts if you click outside of it
 */export default class OutsideAlerter extends Component {
  constructor(props) {
    super(props);

    this.wrapperRef = React.createRef();
    this.handleClickOutside = this.handleClickOutside.bind(this);
  }

  componentDidMount() {
    document.addEventListener("mousedown", this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener("mousedown", this.handleClickOutside);
  }

  /**
   * Alert if clicked on outside of element
   */ handleClickOutside(event) {
    if (this.wrapperRef && !this.wrapperRef.current.contains(event.target)) {
      alert("You clicked outside of me!");
    }
  }

  render() {
    return <div ref={this.wrapperRef}>{this.props.children}</div>;
  }
} 
``` 

__Before 16.3__
 

```js 
import React, { Component } from "react";

/**
 * Component that alerts if you click outside of it
 */export default class OutsideAlerter extends Component {
  constructor(props) {
    super(props);

    this.setWrapperRef = this.setWrapperRef.bind(this);
    this.handleClickOutside = this.handleClickOutside.bind(this);
  }

  componentDidMount() {
    document.addEventListener("mousedown", this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener("mousedown", this.handleClickOutside);
  }

  /**
   * Set the wrapper ref
   */ setWrapperRef(node) {
    this.wrapperRef = node;
  }

  /**
   * Alert if clicked on outside of element
   */ handleClickOutside(event) {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
      alert("You clicked outside of me!");
    }
  }

  render() {
    return <div ref={this.setWrapperRef}>{this.props.children}</div>;
  }
} 
 ``` 

## Using useState

```js
import React, { useState } from "react";
import "./DropDown.css";

export function DropDown({ options, callback }) {
    const [selected, setSelected] = useState("");
    const [expanded, setExpanded] = useState(false);

    function expand() {
        setExpanded(true);
    }

    function close() {
        setExpanded(false);
    }

    function select(event) {
        const value = event.target.textContent;
        callback(value);
        close();
        setSelected(value);
    }

 return (
        <div className="dropdown" tabIndex={0} onFocus={expand} onBlur={close} >
            <div>{selected}</div>
            {expanded ? (
                <div className={"dropdown-options-list"}>
                    {options.map((O) => (
                        <div className={"dropdown-option"} onClick={select}>
                            {O}
                        </div>
                    ))}
                </div>
            ) : null}
        </div>
    );
}
``` 

How to Detect click outside React component?


 
With react-router I can use the Link element to create links which are natively handled by react router.
I see internally it calls this.context.transitionTo(...).
If I want to do a navigation not from a link, but from a dropdown selection for example. 
How can I do this in code?  
You can use
For React Router v4+
## UseNavigate
#### You can  use useNavigate for simplicity  
 ```js
import { useNavigate } from "react-router-dom";

const Newfile = () => {
    const navigate = useNavigate();
   
    ....

    navigate("yourdesiredlocation");

    ....
}

export default Newfile;

```


There is a new useHistory hook in React Router >5.1.0 if you are using React >16.8.0 and functional components. 
## UseHistory
```js
import { useHistory } from "react-router-dom";

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}
 ```


 ```js 

import { useHistory } from 'react-router-dom';


const Component = (props) => {

    const history = useHistory();

  // Programmatically navigate

    history.push(newUrlString);
}
```

## withRouter  
the withRouter higher-order component will inject the history object as a prop of the component. This allows you to access the push and replace methods without having to deal with the context. 

```js 

import { withRouter } from 'react-router-dom'
// this also works with react-router-native

const Button = withRouter(({ history }) => (
  <button
    type='button'
    onClick={() => { history.push('/new-location') }}
  >
    Click Me!
  </button>
))
```
 

How to Programmatically navigate using React router?


 
I'm attempting to hide an item when a user scrolls within a div. The Card component shown is a scrollable component. When the user scrolls within it I want to hide an item. What is the best way to go about this? 
something you could do is move the scrolling ? null : ... outside of the return and just keep it a variable.
 

```js
const [scrolling, setScrolling] = useState(false);
const handleScroll = (e) => {
  setScrolling(true);
};

const item = scrolling ? null :  <p> hide me on scroll </p>
    
return (
  <Card onScroll={handleScroll}>
    {item}
  </Card>
);
```

How to hide Hide Item onScroll React?


 
In this article I am going to show you how to add some events to your react-diagrams project. You will  Find a list of  the different events and how to attach them.

__Hints__: You can add the listener by using the addListener method 

```js
var model=new DiagramModel();
model.addListener({ nodesUpdated: function(e){ // Do something here }, zoomUpdated: function(e){ // Do something here },});
```
And here some important events

## Events for DiagramModel:
```js
nodesUpdated
linksUpdated
offsetUpdated
zoomUpdated
gridUpdated
selectionChanged
entityRemoved 
```

## Events for LinkModel:
```js
sourcePortChanged
targetPortChanged
selectionChanged
entityRemoved  
```

## Events for NodeModel and PointModel:
```js
selectionChanged
entityRemoved
Hope it helped!
``` 

Results for React

How to Detect click outside React component?

How to Programmatically navigate using React router?

How to hide Hide Item onScroll React?

How to How to use events in react-diagrams?