G-Loot DS — dropdown opened (force)

by Augustin Hiebel

React

import React, { useEffect, useRef, useState } from "react";

const DropdownForce = () => {
  const [isActive, setActive] = useState(false);
  const ref = useRef(null);

  const dropdownActive = (e) => {
    e.preventDefault();
    setActive(!isActive);
  };

  const handleClickOutside = (e) => {
    if (ref.current && !ref.current.contains(e.target)) {
      setActive(false);
    }
  }

  useEffect(() => {
    document.addEventListener('click', handleClickOutside, true)
    return () => {
      document.removeEventListener('click', handleClickOutside, true)
    }
  })

  
  return (
  	{/* Toggle between .dropdown-open and .dropdown-close */}
    <div ref={ref} className={`dropdown ${isActive ? "dropdown-open" : "dropdown-closed" }`}>
      <label tabIndex="1" className="button button-primary" onClick={dropdownActive}>
        <span>Click me</span>
        <span className="icon icon-arrow-sm-down" />
      </label>
      <div tabIndex="1" className="dropdown-content w-52 p-1">
        <ul className="menu menu-rounded">
          <li>
            <a tabIndex="1">
              <span>Item 1</span>
            </a>
          </li>
          <li>
            <a tabIndex="1">
              <span>Item 2</span>
            </a>
          </li>
          <li>
            <a tabIndex="1">
              <span>Item 3</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  )
}