Scroll showed when you use emoji reward about react-rewards HOT 6 CLOSED

I've prepared a demo in CodeSandbox so you can try it yourself:
https://codesandbox.io/s/yqp02vlo0z

Hi 👋! It looks like this CodeSandbox is no longer available @thedevelobear, could you post a code snippet in this issue for future users (like me!)?

from react-rewards.

I faced this issue myself. Since react-rewards doesn't allow you to set a class name on the container object, I had to rely on the ref itself. The ref has a "container" key which has a value of the full reward container. This isn't defined in the RewardElement type exported by this package, so I ended up creating a new interface extending it as such:

export interface FullRewardElement extends RewardElement {
  container?: HTMLElement;
}

Then I set some conditional styles on the ref.current object as follows:

  if (ref.current.container) {
        ref.current.container.style.width = "32rem";
        ref.current.container.style.height = "100vh";
        ref.current.container.style.position = "fixed";
        ref.current.container.style.display = "flex";
        ref.current.container.style.alignItems = "center";
        ref.current.container.style.justifyContent = "center";
        ref.current.container.style.zIndex = "999999999";
        ref.current.container.style.overflow = "hidden";
      }

from react-rewards.

Hey! That's right. I didn't limit the animation height because someone may want to make the confetti visible during scroll. You can limit the height by setting the container to position: 'relative' and defining its height.

I've prepared a demo in CodeSandbox so you can try it yourself:
https://codesandbox.io/s/yqp02vlo0z

from react-rewards.

So I think you can fix it on demo, because you can se that on demo scroll bars are showing and disappearing

from react-rewards.

Thanks for the feedback! 👊I fixed the demo, it should look ok now.

from react-rewards.

@thedevelobear same question, could you post a code snippet in this issue?

from react-rewards.