Skip to content
The easiest way to add a responsive and customizable timeline to React apps
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
demo/images
src
.ackrc
.babelrc
.eslintrc.json
.gitignore
.prettierrc.json
.travis.yml
README.md
package-lock.json
package.json
rollup.config.js
yarn.lock

README.md

React Timeline

npm badge travis badge

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>
  );
}
You can’t perform that action at this time.