Forward ref to Event

[denvash]

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.

[steven-mercatante]

Thanks for filing this issue. I've been thinking about how best to support animating events - I'd love to see your final implementation. It would be a great addition to the docs.

[denvash]

You can check the result on my personal site (work still in progress, fully customized timeline with reveal animation).

Try switching the theme on pressing the logo at the navbar.

And the code of the Timeline component here.