title: AdBlock into ReactJs
body: <p>I'm struggling to find a solution without any progress until now . I am trying to catch if the user has an AdBlocker and if it does i want to display a message advising him to turn it off. But , until now no success .</p>
  
  <p>i import my component into my main container like :</p>
  
  <pre><code>&lt;DetectAdBlock pathname={window.location.pathname} /&gt;
  
  </code></pre>
  
  <p>and then this is my adblocker.js</p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types'
  
  class DetectAdBlock extends React.Component {
  
      static propTypes = {
          pathname: PropTypes.string.isRequired
  };
  
      constructor(props) {
          super(props);
          this.state = {
              adBlockDetected: false
          }
          this.detectAdBlocker = this.detectAdBlocker.bind(this);
     }
      componentDidMount() {
          this.detectAdBlocker();
      }
      componentWillUpdate(nextProps, nextState) {
          if (this.props.pathname !== nextProps.pathname) {
              this.detectAdBlocker();
          }
      }
      detectAdBlocker() {
          const head = document.getElementsByTagName('head')[0];
  
          const noAdBlockDetected = () =&gt; {
              this.setState({
                  adBlockDetected: false
              });
          }
          const adBlockDetected = () =&gt; {
              this.setState({
                  adBlockDetected: true
              });
          }
          // clean up stale bait
          const oldScript = 
              document.getElementById('adblock-detection');
          if (oldScript) {
              head.removeChild(oldScript);
          }
          // we will dynamically generate some 'bait'.
          const script = document.createElement('script');
          script.id = 'adblock-detection';
          script.type = 'text/javascript';
          script.src = '/ads.js';
          script.onload = noAdBlockDetected;
          script.onerror = adBlockDetected;
          head.appendChild(script);
      }
      noticeContentJSX() {
          return (
              &lt;div id="adblock-notice"&gt;
                  &lt;div className="message"&gt;
                      &lt;h3&gt;Hey, you!&lt;/h3&gt;
                      &lt;p&gt;Your adblocker is on again.&lt;/p&gt;
                      &lt;button 
                          onClick={this.detectAdBlocker}
                      &gt;
                          Check for Adblocker again
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
      render() {
          return (
              &lt;div id="adblock-wrapper"&gt;
                  { this.state.adBlockDetected 
                    ? this.noticeContentJSX()
                    : null
                  }
              &lt;/div&gt;
          )
      }
  }
  // DetectAdBlock.propTypes = {
  //     pathname: PropTypes.string.isRequired
  // };
  
  DetectAdBlock.defaultProps = {
      pathname: ''
  }
  export default DetectAdBlock;
  </code></pre>
  
  <p>The problem is that there is nothing to show either i have my AdBlock enabled .</p>