Embedding storybook breaking the UI in certain aspects

[monetree]

Here is my react code.

            import ReactFWN from 'react-fwn'

            <ReactFWN
              app_id="I9Agp--RrYDpRmMXqH498a3e0kxmaJSZ"
              mode="story"
              open_in="default"
              autoplay
              open_in={"_iframe"}
              max_videos={1}
              placement="middle"
              size="large"
              />

Please refer to the above image. And it is coming fine for the first time. We are displaying the storybook inside our product feeds.

But, when i scroll down and new product appending to the array it is breaking. We have an array where first time 5 products there.

As we have infinity scroll for product feeds when user scrolls down we are updating the array and appending 5 more products to the array. So that time component rerenders.

There the problem comes.

Now. Please refer above image. Here the storybook completely breaking when i scroll down.

Please take a look and give some feedback how we can solve this to overcome our business problems.

[stefanbackor]

Hi @monetree, Thank you for trying out our React component. I would suggest to experiment with wrapping element display and width, for example..

<div style={{display: 'block', width: '100%'}}>
   <ReactFWN ... />
</div>

[monetree]

            <div style={{ display:'block', width: '100%' }}>
            <ReactFWN
              app_id="I9Agp--RrYDpRmMXqH498a3e0kxmaJSZ"
              mode="story"
              open_in="default"
              autoplay
              open_in={"_iframe"}
              max_videos={1}
              placement="middle"
              size="large"
              />
          </div>

I did same but, still not working. Coming multiple. Tried experimenting a lot

[stefanbackor]

@monetree Would you please update for the latest version. Storyblock support (mode=story) was just added by https://github.com/loopsocial/react-fwn/pull/14

npm install --save react-fwn@latest