Forward ref to Event #32
Description
When developing a library it's a good practice to expose a reference of a component.
It can be achieved with forwardRef.
Working with this library I couldn't obtain Event reference in order to animate it.
A straight forward implementation can be something like this:
const Event = forwardRef(({ date, marker, children, className, card }, ref) => {
...
return <Container ref={ref}>...</Container>
});
The user then can use the reference for his care, like reveal animation:
const Timeline = () => {
const revealEvents = useRef([]);
useEffect(() => {
revealEvents.current.forEach((ref, i) => sr.reveal(ref, srConfig(i * 100)));
}, []);
const events = useTimeline();
return (
<ThemedTimeline>
<Events>
{events.map(({ ... }, i) => {
const MyCustomCard = () => (... );
const date = () => (... );
return <Event key={i} date={date} card={MyCustomCard} ref={el => (revealEvents.current[i] = el)}/>;
})}
</Events>
</ThemedTimeline>
);
};
I hope I'll able to add a merge request in a few days.