Simple DropDown

Creating Drop Down with Element Popper is very simple.

In this example we create a simple dropdown with minimum css.

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 {
  background: #ddd;
}

code:

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

export default function App() {
  const [active, setActive] = useState(false)

  const toggleDropDown = () => setActive(!active)

  const button = (
    <button onClick={toggleDropDown}>click here</button>
  )

  const list = (
    <ul className="dropdown">
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ul>
  )

  return (
    <ElementPopper
      element={button}
      popper={active && list}
      position="bottom-left"
    />
  )
}

Simple DropDown With Animation

Use the animation prop, if you want to popper appears with pop-up animation

<ElementPopper
  element={button}
  popper={active && list}
  position="bottom-left"
  animation
/>

Position Right

You can use any of the top, right and left values instead of the bottom position used in the above examples.

<ElementPopper
  element={button}
  popper={active && list}
  position="right-end"
/>