ReactInviewMonitor adds an extra div wrapper to my contents

[Lwdthe1]

<div class="grid">
   <ImpressionRecorder>
       <div className="grid-item card story-card">
       </div>
    </ImpressionRecorder/>
</div>

Renders:

<div class="grid">
    <div class>
       <div className="card story-card">
       </div>
    </>
</div>

It would be ideal if it didn't add that extra wrapper. I can make this work by changing my css a little, but it breaks my grid.

[pocketjoso]

Hi, Yeah extra wrappers can be quite annoying to handle when using grid, and sometimes flex as well. One workaround would be to use the newer display: contents CSS rule, but it's not that well supported yet, unfortunately.

The library needs a DOM element primarily for the in view detection, and the DOM element is also used for adding/removing classes. In theory both of these could be delegated to the children (react ref and className strings, respectively), but it would start to get quite messy.

Alternatively I think you'll have to do what you suggested yourself: extract out the styles relayed to your grid element layout and add them to a class that you pass to the InViewMonitor. Did you give this a try yet?