Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

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

Closed
capi1O opened this issue Jan 27, 2021 · 2 comments
Closed
Labels
bug Something isn't working

Comments

@capi1O
Copy link

capi1O commented Jan 27, 2021

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.

@capi1O capi1O changed the title cannot pass props to component passed as <Timeline /> target with forwardRef cannot pass props to component passed as <Timeline /> target with forwardRef Jan 27, 2021
@bitworking
Copy link
Owner

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
Copy link
Owner

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

@bitworking bitworking added the bug Something isn't working label Mar 31, 2021
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants