<@U33H6SB2B> how does one use the popper wrapper? ...

# javascript

[Nikola Milovic]

@turansky how does one use the popper wrapper? I encountered issue of not knowing how to apply styles properly and how to work with modifiers in this setup. No errors no crashing, my website just becomes blank when I add this code

val referenceElement = useRef<HTMLElement>(null);
    val popperElement = useRef<HTMLElement>(null);
    val arrowElement = useRef<HTMLElement>(null);
    val popper = usePopper(referenceElement.current,
        popperElement.current,
        object : UsePopperOptions<dynamic> {
            override var modifiers: ReadonlyArray<Modifier<dynamic>> = arrayOf(js(
                "{ name : 'arrow', options: {element: arrowElement}}"
            ))
            override var onFirstUpdate: (State) -> Unit = {}
            override var placement: Placement = Placement.auto
            override var strategy: PositioningStrategy = PositioningStrategy.absolute

        })
....
          div("bg-blue-500 text-white font-bold") {
                        attrs.id = "tooltip"
                        attrs.role = "tooltip"
                        attrs.style = popper.styles["popper"].toString()
                        +"Test tooltip"

                        div {
                            attrs.id = "arrow"
                            this.ref = arrowElement
                            attrs.style = popper.styles["arrow"].toString()
                        }
                    }

[turansky]

For start:
1. You need use jso factory method
a. object: - prohibited (for all props)
2. You need useRefState hook for element change detection (JS example)
cc @Sergei Grishchenko

[turansky]

@Nikola Milovic We will add strict popper modifiers in nearest future

[turansky]

Issue - https://github.com/JetBrains/kotlin-wrappers/issues/956