Search code examples
reactjsmaterial-uipopper.js

Example of using arrow in Popper component of material-ui

There is playground example on Popper component page of material-ui. To add arrow they use arrowRef. Please explain me where do they get it from?

Solution

  • For anyone else that needs it, the OP is asking about Material-UI Poppers.

    Dmitriy,

    Think of React Refs as a variable that always references the element (if rendered) OUTSIDE of the DOM. React best practices are typically to stay out of the DOM if at all possible. There are of course exceptions to this, but it's the rule of thumb.

    In this particular instance, it appears that they are creating an element elsewhere and referencing it using the ref so that it can be utilized by the Popper. I found an example of this here. It's a little hard to read through, but the jist is that he creates a span and styles it how he wants to be applied.