React Element Popper

Refreshing Position

When the popper element is open and the position of refrence element changes, the popper position remains constant because the element popper does not listen to the click events.

In these cases, you can use the refreshPosition function, which is located in the ref object.

import React, { useState, useRef } from "react"
import ElementPopper from "react-element-popper"
import "react-element-popper/build/element_popper.css"

export default function App() {
  const [visible, setVisible] = useState(false)
  const [visible2, setVisible2] = useState(false)
  const ref = useRef()

  const globalProps = {
    element: (
      <Component 
        size={80}
        backgroundColor="red"
      >
        Refrence Element
      </Component>
    ),
    popper: (
      <Component 
        size={100}
        backgroundColor="white"
      >
        Popper Element
      </Component>
    ),
    position: "bottom",
    fixMainPosition: true,
    popperShadow: true,
    arrow: true
  }

  return (
    <div>
      <div style={{ marginBottom: "150px", padding: "0 10px" }}>
        <h2>Example 1 (without using refresh position) :</h2>
        {visible && <span>a demo text to force the refrence element to move forward!</span>}
        <ElementPopper {...globalProps} />
        <button
          onClick={() => setVisible(!visible)}
        >
          {visible ? "refresh" : "click here"}
        </button>
      </div>
    
      <div style={{ marginBottom: "150px", padding: "0 10px" }}>
        <h2>Example 2 (with using refresh position) :</h2>
        {visible2 && <span>a demo text to force the refrence element to move forward!</span>}
        <ElementPopper ref={ref} {...globalProps} />
        <button
          onClick={() => {
            setVisible2(!visible2)
          
            ref.current.refreshPosition()
          }}
        >
          {visible2 ? "refresh" : "click here"}
        </button>
      </div>
    </div>
  )
}

Example 1 (without using refresh position) :

Refrence Element

Popper Element

Example 2 (with using refresh position) :

Refrence Element

Popper Element