steven-mercatante/react-timeline

The easiest way to add a responsive and customizable timeline to React apps

React Timeline

The easiest way to add responsive and customizable timelines to React apps.

View the documentation for detailed instructions and demos.

Installation

npm install @merc/react-timeline
# or
yarn add @merc/react-timeline

Usage

import React from 'react';
import {
  Timeline,
  Events,
  UrlButton,
  ImageEvent,
  TextEvent,
  YouTubeEvent,
} from '@merc/react-timeline';

export default function App() {
  return (
    <Timeline>
      <Events>
        <TextEvent date="1/1/19" text="**Markdown** is *supported*" />

        <ImageEvent
          date="4/13/19"
          text="You can embed images..."
          src="https://res.cloudinary.com/dovoq8jou/image/upload/v1564772194/jellyfish.jpg"
          alt="jellyfish swimming"
          credit="Photo by [@tavi004](https://unsplash.com/@tavi004)"
        >
          <div>
            <UrlButton href="https://unsplash.com/search/photos/undersea">
              View more undersea photos
            </UrlButton>
          </div>
        </ImageEvent>

        <YouTubeEvent
          date="6/18/19"
          id="6UnRHtwHGSE"
          name="General Tso's Chicken recipe"
          text="... and YouTube videos!"
        />
      </Events>
    </Timeline>
  );
}

react-timeline's Issues

Markdown not working when deploying app on heroku

The markdown is working fine on localhost , but when i hosted the app markdown isn't working. I dont know if im doing something wrong.

Storybook is broken for some components

https://react-timeline.com/?path=/story/atoms-imageatom--remote-url
https://react-timeline.com/?path=/story/atoms-imageatom--local-image
https://react-timeline.com/?path=/story/controls-button--button
https://react-timeline.com/?path=/story/controls-button--with-on-click-handler

Horizontal mode

Any easy way to make it Horizontal?

'styled-components' also should be installed to make library works

Could you please update a documentation with missed library

npm install @merc/react-timeline

with

npm install @merc/react-timeline styled-components --save

Marker alignment differences

The alignment of the event marker relative to the line is slightly off, layout styles affected:

• alt-evts
• alt-evts-inline-date
• inline-evts

When switching through the different layout styles available, the issue does not seem to occur when using the inline-evts-inline-date-layout :

Forward ref to Event

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.

On custom card wrong media-queries

On providing a custom card, 768px is a "Golden Number" which may brake the component, in this case, the user should control the query and the default one need to be disabled.

Possible user's fix example:

const EventDetails = styled.div`
  ${mixins.boxShadowSmall}
  background-color: ${colors.backgroundDark};
  padding: 15px;
  @media (max-width: 768px) {
    display: none;
  }
`;

The user may not catch the bug on smaller devices, therefore, it is not expected behavior.