react-alternating-timeline v2.1.4

react-alternating-timeline

A simple and compact, true masonry style alternating timeline react component which is fully customizable and free stylable.

Features

• 🎛️ Customize everything.
• 🎨 Consistent (BEM) class naming for easy styling with CSS, emotion...
• ⏰ Custom date formatting.
• ⚖️ Alternating, left or right positioning.
• 🖼️ Render images and custom content.
• 🪄 Built with Typescript.

Installation

Add the package with the package manager via NPMs or GitHubs registry of choice to your project:

• yarn: yarn add react-alternating-timeline
• npm: npm install react-alternating-timeline
• pnpm: pnpm add react-alternating-timeline
• npx: npx -p react-alternating-timeline

Usage

import { Timeline, TimelineItemsProps } from 'react-alternating-timeline';

const items: TimelineItemsProps = [
  {
    key: 'first',
    date: new Date(),
    title: 'Special event!',
  },
  {
    key: 'second',
    date: new Date(),
    title: 'Event',
    children: <img src="./test.jpg" alt="test" />,
  },
  ...
];

<Timeline items={items} />;

API

The available properties of the Timeline component:

TimelineItemsProps

An array of the following properties:

Styling

The style can either be passed as an object through the styleConfig property...

{
  line?: {
    width?: CSSProperties['width'];
    color?: CSSProperties['backgroundColor'];
    overhang?: CSSProperties['paddingBlock'];
  };
  item?: {
    gap?: CSSProperties['gap'];
    startOffset?: {
      left?: CSSProperties['marginTop'];
      right?: CSSProperties['marginTop'];
    };
  };
  marker?: {
    size?: CSSProperties['width'];
    color?: CSSProperties['backgroundColor'];
    radius?: CSSProperties['borderRadius'];
  };
  pointer?: {
    height?: CSSProperties['height'];
    width?: CSSProperties['width'];
    minOffset?: CSSProperties['marginTop'];
  };
  card?: {
    background?: CSSProperties['backgroundColor'];
    radius?: CSSProperties['borderRadius'];
    shadow?: CSSProperties['boxShadow'];
    padding?: CSSProperties['padding'];
    offset?: CSSProperties['gap'];
  };
}

...or can be set as custom properties directly in css

.timeline {
  --line-width: 0.2rem;
  --line-color: black;
  --line-overhang: 1rem;
  --item-gap: 1rem;
  --item-start-offset-left: 0;
  --item-start-offset-right: 5rem;
  --marker-size: 1rem;
  --marker-color: var(--line-color);
  --marker-radius: 50%;
  --pointer-height: 2rem;
  --pointer-width: 1rem;
  --pointer-min-offset: 5rem;
  --card-background: whitesmoke;
  --card-radius: 0.1rem;
  --card-shadow: unset;
  --card-padding: 1rem;
  --card-offset: 1rem;
}

StyleConfig

Demo

View a full demo of component as storybook: Storybook 📚