regression when using animation from 0.4.3

I was using the following code in 0.4.3 without any issues:

     <Manager>
        <Target component={null}>
          <Button label="button" onClick={this.togglePopover} />
        </Target>
        <VelocityTransitionGroup
          enter={{
            animation: {
              opacity: [1, 'easeOutQuart'],
              scale: [1, [600, 35]],
            },
            duration: 300,
          }}
          leave={{
            animation: {
              opacity: [0, 'easeOutQuart'],
              scale: [0.3, [500, 35]],
            },
            duration: 150,
          }}
          runOnMount
        >
          {this.state.isOpen &&
            <Popper placement="bottom">
              Popper!
            </Popper>}
        </VelocityTransitionGroup>
      </Manager>

I rewrote this code after updating to 0.5.0:

      <Manager>
          <Target>
            {({ targetRef }) => (
              <Button
                label="button"
                ref={targetRef}
                onClick={this.togglePopover}
              />
            )}
          </Target>
          <VelocityTransitionGroup
            enter={{
              animation: {
                opacity: [1, 'easeOutQuart'],
                scale: [1, [600, 35]],
              },
              duration: 300,
            }}
            leave={{
              animation: {
                opacity: [0, 'easeOutQuart'],
                scale: [0.3, [500, 35]],
              },
              duration: 150,
            }}
            runOnMount
          >
            {this.state.isOpen &&
              <Popper placement="bottom">
                {({ popperRef, popperStyle, popperPlacement }) => (
                  <div
                    ref={popperRef}
                    style={popperStyle}
                    data-placement={popperPlacement}
                  >
                    Menu?
                  </div>
                )}
              </Popper>}
          </VelocityTransitionGroup>
      </Manager>

I’m sure there is a possibility I’m doing something wrong and I’ll keep hacking on it, but I figured it was worth raising!

[souporserious]

I feel you on it, I really liked component as well since it was much more simple. But, I guess simple doesn’t always mean other things will be simple 😅

I think I’m going to go with just popperProps. It will merge whatever components props are above it so users should still be able to add styles just fine since you can do something like the following…

<Popper>
  {popperProps => (
    <div
      {...popperProps}
      className="popper"
      style={{
        ...myCustomStyles,
        ...popperProps.style
      }}
    >
      ...
    </div>
  )}
</Popper>

[souporserious]

Should be good to go now with the latest release https://github.com/souporserious/react-popper/commit/2109ac0aa4210eafc668b3abe8d6e7a9ac2b2ada 🎉 feel free to reopen or file any new issues you find 😅 thanks for working through it with me!