teodosii / react-tweenful Goto Github PK

Hey :). I'm using functional components and useState. Simply changing the value of a textbox (via the function provided by setState) will cause the animation to be re-run. Maybe I'm missing something :).

I was trying to create a ref in Tweenful.div, but it appears that the it's a function component wrapper, so React shows warnings as following:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

In my constructor I created a ref

        this.container = React.createRef();

And this is my code using Tweenful.div

            <Tweenful.div
                ref={this.container}
                className="tween-box row ml-2 mb-2 mr-2 mt-2"
                duration={1500}
                easing={elastic(1, 0.25)}
                style={{ position: 'relative' }}
                animate={animate}>
                // child components
            </Tweenful.div>

I have mutliple buttons onClick which calls a function. The function will call the react-notification-component.
If I click on the same button the notification will continously reappear which is find, the slight problem is when I click on another button the old notification remains. Is there a way I can clear all notifications within that function?