bitworking / react-gsap

React components for GSAP
https://bitworking.github.io/react-gsap/
Other
583 stars 34 forks source link

cannot pass props to component passed as <Timeline /> target with forwardRef #33

Closed capi1O closed 3 years ago

capi1O commented 3 years ago

Following the example Advanced multiple targets I am passing a component (called <Component />) to my <Timeline /> and use the method targets.set to "assign" a name to an underlying element (here the <div className="someClass" />).

// here props are destructured : { className = '', children }
const Component = forwardRef(({ className = '', children }, targets) => {

    return (
        <div className={`component ${className}`}>
            <span>{children}</span>
            <div ref={(div) => targets.set('div', div)} className="someClass" />
        </div>
    );
 });

Then I would like to pass props from AnimatedComponent /> to <Component />:

const AnimatedComponent = ({ children, ...props }) => (
    <Timeline target={<Component {...props}>{children}</Component>}>
        <Tween target="div" from={{ opacity: 0 }} to={{ opacity: 1 }} duration={0.5} />
    </Timeline>
);

However none of the props (children, className) is passed to <Component />. Can you provide some hint?

My goal is to have two version of the component, one animated and one not.

bitworking commented 3 years ago

Thanks, I hope I'll find some time to look at this. I think I have to merge the refs in order to make this work.

bitworking commented 3 years ago

Ok, found the bug. Will be fixed in version 2.3.0