Create Bootstrap Dropdown in React

React Native, ReactJS

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They are made interactive with the included Bootstrap dropdown. Dropdown are toggled by clicking. Here we will create bootstrap dropdown in react.

Create Bootstrap Dropdown in React

class Dropdown extends React.Component {

  constructor(props) {
    super(props);

    this.toggleDropdown = this.toggleDropdown.bind(this);
    this.handleMouseEvent = this.handleMouseEvent.bind(this);
    this.handleBlurEvent = this.handleBlurEvent.bind(this);
    this.hasFocus = this.hasFocus.bind(this);

    this.state = {
      show: false
    };
  }

  componentDidMount() {
    document.addEventListener('mouseup', this.handleMouseEvent);
    this.dropdown.addEventListener('focusout', this.handleBlurEvent);
  }

  hasFocus(target) {
    if (!this.dropdown) {
      return false;
    }
    var dropdownHasFocus = false;
    var nodeIterator = document.createNodeIterator(this.dropdown, NodeFilter.SHOW_ELEMENT, null, false);
    var node;    
    
    while(node = nodeIterator.nextNode()) {
      if (node === target) {
        dropdownHasFocus = true;
        break;
      }
    }
    
    return dropdownHasFocus;
  }
  
  handleBlurEvent(e) {
    var dropdownHasFocus = this.hasFocus(e.relatedTarget);
    
    if (!dropdownHasFocus) {
      this.setState({
        show: false
      });
    }    
  }
  
  handleMouseEvent(e) {
    var dropdownHasFocus = this.hasFocus(e.target);
    
    if (!dropdownHasFocus) {
      this.setState({
        show: false
      });
    }
  }

  toggleDropdown() {
    this.setState({
      show: !this.state.show
    });
  }
  
  render() {
    return (
      <div className={`dropdown ${this.state.show ? 'show' : ''}`} ref={(dropdown) => this.dropdown = dropdown}>
        <button 
          className="btn btn-secondary dropdown-toggle" 
          type="button" 
          id="dropdownMenuButton" 
          data-toggle="dropdown" 
          aria-haspopup="true" 
          aria-expanded={this.state.show}
          onClick={this.toggleDropdown}>
          Dropdown button
        </button>
        <div 
          className="dropdown-menu" 
          aria-labelledby="dropdownMenuButton">
          <a className="dropdown-item" href="#nogo">Item 1</a>
          <a className="dropdown-item" href="#nogo">Item 2</a>
        </div>
      </div>
    );
  }
}

Now we have react <Dropdown /> component and we can use this in our functional or class components easily.


Recommendation

Create Searchbar Component in React

Create Barcode in React

Timeline in React

Editable Tables in React

Create QR Code in React

Create Tooltips in React

How to validate form in React

Create Progressbar in React

Context Menu in React

How to create charts in ReactJS

Create Popup Component in React

Create Drag and Drop List in React

MultiSelect Components in React

Create AutoComplete or Autosuggest in React

Types of Storage For React

Card Components in React

For more React Tutorials Click hereNode.js Tutorials Click here.

If you like this, share this.

Follow us on FacebookTwitterTumblrLinkedInYouTube.