Flipped div overrides styles

[michalk91]

I have a component lightbox to which I pass children. The children are in a grid container. Flipped div adds extra container which breaks grid styles. In my component i'm using react children and react clone element. Flipped div wraped all my images in one Flipped container. Is it possible to wrap each one separately using react clone element? How can i solve this problem?

Code when i'm adding Flipped div :

 _{!lightboxForSlider &&
        !textAndImageLightbox &&
        React.Children.map(children, (child, index) => (
             <Flipped flipId={`image${index}`}>
                  {React.cloneElement(child, {
                    onClick: openGallery,
                    "data-id": index,
              })}
             </Flipped>
        ))}_

Code where i'm passing children to lightbox component :

_<div className={classNames(styles.container, "innerContentWidth")}>
  <RichLightboxGallery  thumbnailWithBorderRadius >

    {images.map((item, index) => (
      <div className={styles.imgContainer} key={index}>
        <Image
          src={item.src}
          alt={item.alt}
          layout="fill"
          priority={true}
          objectFit="cover"
        />
      </div>

    ))}

  </RichLightboxGallery>
  </div>_

Thank you very much for your help and time. Greetings!

[aholachek]

Hi michalk, Have you tried using the render prop approach and spreading the props into the cloned child?

[michalk91]

Hi aholachek, Thank you very much for your anwser. I was wrong, the "Flipper" component was the problem. i did it like this and now it works:

  {!lightboxForSlider &&
        !textAndImageLightbox &&
        React.Children.map(children, (child, index) => (
          <Flipper flipKey={lightboxOpen} portalKey="modal">
          <Flipped flipId={`${lightboxFor}${index}`}>
            {React.cloneElement(child, {
              onClick: openGallery,
              "data-id": index,
            })}
          </Flipped>
          </Flipper>
        ))}

I would also like to ask if it is better to wrap the entire component or, as I did, each child. Maybe it's better to wrap at the point where the component is called? Doesn't it matter? I'm talking about efficiency, of course. I know i can use memoisation.

In my opinion your library is better than framer motion because it is lightweight, doesn't add redundant animations, seems to work more efficiently.

Thank you for your work.

[michalk91]

Solved.