Simple Example

import React, { useState } from "react"
import ElementPopper from "react-element-popper"

export default function App() {
  const [state, setState] = useState({})

  const updateState = number => setState({ ...state, [number]: !state[number] })

  const Button = ({ number }) => (
    <button onClick={() => updateState(number)}>click here</button>
  )

  return (
    <ElementPopper
      position="right"
      element={<Button number={1} />}
      popper={state[1] && (
        <ElementPopper
          position="right"
          element={<Button number={2} />}
          popper={state[2] && (
            <ElementPopper
              position="right"
              element={<Button number={3} />}
              popper={state[3] && <button>last one</button>}
            />
          )}
        />
      )}
    />
  )
}

Nested DropDown

In this example, a dropdown with nested menus has been created using the feature described above.

style.css:

.dropdown {
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: white;
  border: 1px solid black;
}

.dropdown li {
  min-width: 120px;
  cursor: pointer;
  padding: 2px 10px;
}

.dropdown li:hover,
.dropdown div.item:hover {
  background: #ddd;
}

.dropdown div.item {
  cursor: pointer;
  height: 26px;
}

code:

import React, { useState } from "react"
import ElementPopper from "react-element-popper"

export default function App() {
  const [state, setState] = useState({})

  const list = (
    <ul className="dropdown">
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ul>
  )
        
  const mainList = (
    <div className="dropdown">
      {[1, 2, 3, 4].map((number, index) => (
        <div
          key={index}
          className="item"
          onMouseOver={() => setState({ 
            main: true, 
            ["item" + number]: true 
          })}
        >
          <ElementPopper
            containerStyle={{ width: "120px" }}
            element={(
              <>
                <span>item {number}</span>
                <span style={{ float: "right" }}>{">"}</span>
              </>
            )}
            popper={state["item" + number] && list}
            position="right-top"
          />
        </div>
      ))}
    </div>
  )

  return (
    <ElementPopper
      element={(
        <button
          onClick={() => setState({ main: !state.main })}
        >
          click here
        </button>
      )}
      popper={state.main && mainList}
      position="bottom-left"
    />
  )
}