DEV Community

poshiya parth s
poshiya parth s

Posted on

3

dropdown open in portal for using table in react

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

const PortalWrapper = React.forwardRef(({ children }, ref) => {
  const [openDropdownMenu, setOpenDropdownMenu] = useState(false);
  const [position, setPosition] = useState({
    left: 0,
    top: 0,
    width: "100%",
  });

  const dropdownRef = useRef(null);

  const handleDropdDownClick = () => {
    setOpenDropdownMenu(!openDropdownMenu);
    if (ref && "current" in ref && ref.current) {
      const { top, left, height } = ref.current.getBoundingClientRect();
      setPosition({
        top: top + height,
        left,
        width: `${ref.current.clientWidth}px`,
      });
    }
  };

  useEffect(() => {
    if (openDropdownMenu && dropdownRef.current) {
      dropdownRef.current.style.top = `${position.top}px`;
      dropdownRef.current.style.left = `${position.left}px`;
      dropdownRef.current.style.display = "none";
    }
  }, [openDropdownMenu, position]);

  return (
    <div ref={ref} className="w-full" onClick={handleDropdDownClick}>
      {children(position)}
      {openDropdownMenu &&
        ReactDOM.createPortal(
          <div ref={dropdownRef} style={{ position: "absolute" }}>
            {children(position)}
          </div>,
          document.body
        )}
    </div>
  );
});
export default PortalWrapper;

Enter fullscreen mode Exit fullscreen mode
 <PortalWrapper ref={dropdownRef}>
                      {() =>
                        (itIsOwner(user?.agent_role) ||
                          user?.platform_owner) && (
                          <Select
                            styles={CustomStyle}
                            onChange={(selectedOption) =>
                              handleActionChange(
                                selectedOption,
                                contactInfo,
                                index
                              )
                            }
                            options={agentData?.map((option) => ({
                              value: option,
                              label: `${option.first_name} `,
                            }))}
                            placeholder="Esther Howard"
                            className={clsx(
                              "dropdown_list !w-40 cursor-pointer userFilter mt-[0.4375rem]"
                            )}
                            classNamePrefix="dropdown_list-contacts"
                            menuPosition="fixed"
                            menuPlacement="auto"
                            menuShouldScrollIntoView={false}
                            menuPortalTarget={document.body}
                          />
                        )
                      }
                    </PortalWrapper>
Enter fullscreen mode Exit fullscreen mode

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more