7

I'm trying to follow the example on Popper.js's documentation on how to implement an arrow found here using their usePopper hook:

https://popper.js.org/react-popper/v2/

I tried putting this in a codebox and then console.log the styles.arrow and see that it's printing this:

{position: "absolute", top: "", left: "0", transform: "translate3d(50px, 0px, 0)"}

So I add this code to my app which is in typescript, it looks like this:

 const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);
  const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);
  const [arrowElement, setArrowElement] = useState<HTMLElement | null>(null);
  const { styles, attributes } = usePopper(referenceElement, popperElement, {
    modifiers: [
      {
        name: 'arrow',
        options: {
          element: arrowElement,
        },
      },
    ],
  });

However, when I console.log styles.arrow here, it comes back undefined. I'm feeling like there's something wrong here. Have I declared something wrong?

Andrew Bautista
  • 153
  • 2
  • 9

1 Answers1

5

There is nothing wrong with the example or behavior.

As mentioned in this comment, Popper doesn't provide any style. and you must see the styling tutorial

amirhe
  • 2,186
  • 1
  • 13
  • 27