Delegate to React the DOM manipulation

[FezVrasta]

Right now seems like you are letting Popper use the applyStyle modifier to directly edit the DOM and apply the needed styles.

I think it would be much better to disable applyStyle and use React to update the DOM.

Here there's an example:
https://gist.github.com/FezVrasta/6533adf4358a6927b48f7478706a5f23

[souporserious]

I looked into this and then realized we are already touching the DOM by creating a node to stick the Popper in https://github.com/souporserious/react-popper/blob/master/src/PopperManager.jsx#L65-L71 so I figured we didn't need to worry about it. Maybe I'm wrong in that thinking. Thoughts?

[FezVrasta]

It would be less DOM that is touched directly. I think everything should be managed by React when possible. In this way it can make its optimizations.

[FezVrasta]

This is how the Popper should be initialized:

this._popper = new Popper(this._referenceNode, popperNode, {
  placement,
  modifiers: {
    ...modifiers,
    applyStyle: { enabled: false },
    extractPosition: {
      enabled: true,
      order: 800,
      function: this._extractPosition,
    },
    arrow: { element: this._arrowNode }
  },
})

And this is the modifier that extracts the position:

_extractPosition = (data) => {
  const { gpuAcceleration } = this.props
  const {
    attributes: popperAttributes
  } = data
  
  const popperStyle = {
    position: data.offsets.popper.position,
  }
  
  if (gpuAcceleration) {
    popperStyle.left = 0
    popperStyle.top = 0
    popperStyle.transform = `translate3d(${Math.round(data.offsets.popper.left)}px, ${Math.round(data.offsets.popper.top)}px, 0)`
  } else {
    popperStyle.left = data.offsets.popper.left
    popperStyle.top = data.offsets.popper.top
  }
  
  this.setState({
    popperAttributes: data.attributes,
    popperStyle,
    arrowStyle: data.offsets.arrow,
  })
}

It would make sense to allow react-popper to render the Popper as adjacent element of its reference thus letting React do everything (no portal/render to body). Popper works quite well in this situation.

[victorias]

I started my own fork based on your example code where React manages the popper instance directly and just references Popper's configs here: https://github.com/victorias/react-popperjs . Would love some feedback!

[souporserious]

Styles are now applied through React 🎉