Timeline

v.6.0.0

Installation

yarn

yarn add @mercell/timeline-react'

pnpm

pnpm add @mercell/timeline-react'

npm

npm install --save @mercell/timeline-react'

The Timeline has necessary peerDependencies, please make sure that you have them in your project

"@mercell/tailwind": "^6.0.1",
"classnames": "^2.3.1",
"react": "^17.0.2" 

Usage

Using the Timeline component is as simple as importing it like this.

import { Timeline } from '@mercell/timeline-react';

Live Editor

// You can play with code, with HTML tags and text as much as you want! const events = [ { isoDate: '1969-07-25T00:00:00.000Z', dateLabel: 'Jul 25', description: 'Walk on the moon', }, { isoDate: '1969-12-01T12:00:00.000Z', dateLabel: 'Dec 01', timeLabel: '12:00', description: 'Early event with a very long description, detailing about why it occurred and other details to demonstrate word wrapping', }, { isoDate: '2020-08-30T00:00:00.000Z', dateLabel: 'Aug 30', description: 'More recent event', }, { isoDate: '2019-08-28T05:00:00.000Z', dateLabel: 'Aug 28', description: 'Recent event', }, { isoDate: '2040-08-28T05:00:00.000Z', dateLabel: 'Aug 28', description: 'Upcoming event', }, { isoDate: '2040-08-30T05:00:00.000Z', dateLabel: 'Aug 30', description: 'Future event', }, ]; const timelineEvents = events.map((singleEvent,index) => { if (index === 0 || index > 0 && new Date(singleEvent.isoDate).getFullYear() > new Date(events[index-1].isoDate).getFullYear()) { return ( <React.Fragment key={singleEvent.isoDate}> <TimelineItem customIndicator={new Date(singleEvent.isoDate).getFullYear()} customIndicatorPosition='right' /> <TimelineItem> {singleEvent.dateLabel} {singleEvent.timeLabel} - {singleEvent.description} </TimelineItem> </React.Fragment> ) } return ( <TimelineItem key={singleEvent.isoDate}> {singleEvent.dateLabel} {singleEvent.timeLabel} - {singleEvent.description} </TimelineItem> ) }) render ( <Timeline> {timelineEvents} </Timeline> )

// You can play with code, with HTML tags and text as much as you want!
const events = [
    {
        isoDate: '1969-07-25T00:00:00.000Z',
        dateLabel: 'Jul 25',
        description: 'Walk on the moon',
    },
    {
        isoDate: '1969-12-01T12:00:00.000Z',
        dateLabel: 'Dec 01',
        timeLabel: '12:00',
        description:
            'Early event with a very long description, detailing about why it occurred and other details to demonstrate word wrapping',
    },
    {
        isoDate: '2020-08-30T00:00:00.000Z',
        dateLabel: 'Aug 30',
        description: 'More recent event',
    },
    {
        isoDate: '2019-08-28T05:00:00.000Z',
        dateLabel: 'Aug 28',
        description: 'Recent event',
    },
    {
        isoDate: '2040-08-28T05:00:00.000Z',
        dateLabel: 'Aug 28',
        description: 'Upcoming event',
    },
    {
        isoDate: '2040-08-30T05:00:00.000Z',
        dateLabel: 'Aug 30',
        description: 'Future event',
    },
];
const timelineEvents = events.map((singleEvent,index) => {
if (index === 0
    || index > 0
    && new Date(singleEvent.isoDate).getFullYear() > new Date(events[index-1].isoDate).getFullYear()) {
    return (
        <React.Fragment key={singleEvent.isoDate}>
            <TimelineItem
                customIndicator={new Date(singleEvent.isoDate).getFullYear()}
                customIndicatorPosition='right'
            />
            <TimelineItem>
                {singleEvent.dateLabel} {singleEvent.timeLabel} - {singleEvent.description}
            </TimelineItem>
        </React.Fragment>
    )
}
    return (
        <TimelineItem key={singleEvent.isoDate}>
            {singleEvent.dateLabel} {singleEvent.timeLabel} - {singleEvent.description}
        </TimelineItem>
    )
})
render (
    <Timeline>
        {timelineEvents}
    </Timeline>
)

Result

Types, definitions, etc.

Types

TimelineProps

interface TimelineProps {
    eventsOccurred?: number;
    eventsTotal?: number;
} & JSX.IntrinsicElements['ul']

Name	Type	Default	Required	Description
eventsOccurred	number	-	no	Screen reader will have progress tag to give user info about events
eventsTotal	number	-	no	Screen reader will have progress tag to give user info about events

TimelineItemProps

interface TimelineEvent {
    customIndicatorPosition?: 'right' | 'center';
    customIndicator?: ReactNode;
    lineClassName?: string;
    indicatorWrapperClassName?: string;
    textClassName?: string;
} & JSX.IntrinsicElements['li']

Name	Type	Default	Required	Description
customIndicatorPosition	'right' | 'center'	'center'	no	Position of custom indicator in regards to the line
customIndicator	ReactNode	-	no	Custom indicator - can be icon, text, etc.
lineClassName	string	-	no	ClassName access to the line div
indicatorWrapperClassName	string	-	no	ClassName access to the wrapper of indicator
textClassName	string	-	no	ClassName access to the child (ReactNode)

Changelog

Change Log - @mercell/timeline-react

This log was last generated on Fri, 11 Nov 2022 09:18:57 GMT and should not be manually modified.

6.0.0

Fri, 11 Nov 2022 09:18:57 GMT

Breaking changes

• New styling approach - use only tailwind classes, add tailwind-merge library

5.0.0

Thu, 15 Sep 2022 06:07:41 GMT

Breaking changes

• Migration to Tailwind3, React 18 and ViteJS from webpack.

4.0.2

Wed, 20 Jul 2022 12:52:45 GMT

Patches

• Fix background color in custom indicator

4.0.1

Thu, 30 Jun 2022 10:57:49 GMT

Patches

• Package.json refactor, add test suite, more tests soon

4.0.0

Mon, 23 May 2022 06:42:56 GMT

Breaking changes

• New timeline, new design

3.0.4

Fri, 08 Apr 2022 10:19:50 GMT

Patches

• Bump dependencies

3.0.3

Mon, 28 Feb 2022 12:45:49 GMT

Patches

• Dependency update

3.0.2

Mon, 28 Feb 2022 10:55:32 GMT

Patches

• Bump typescript

3.0.1

Wed, 26 Jan 2022 16:19:19 GMT

Patches

• Adding the same peerDependencies to devDependencies

3.0.0

Wed, 15 Dec 2021 22:20:34 GMT

Breaking changes

• Update to match figma design

2.0.5

Fri, 12 Nov 2021 13:08:30 GMT

Patches

• Add @mercell/tailwind to devDeps to be always up to date

2.0.4

Fri, 05 Nov 2021 11:10:13 GMT

Patches

• Bump peerDependency

2.0.3

Thu, 04 Nov 2021 10:10:16 GMT

Patches

• Tailwind type fix
• Revert tailwind version

2.0.2

Wed, 03 Nov 2021 15:28:42 GMT

Patches

• react types >=17

2.0.1

Wed, 27 Oct 2021 12:53:13 GMT

Patches

• Gitignore fix

2.0.0

Mon, 18 Oct 2021 07:16:21 GMT

Breaking changes

• New local build process with webpack without storybook, add npmignore and update dependencies

1.0.7

Mon, 12 Jul 2021 10:50:09 GMT

Patches

• Updating dependencies
• Updating dependencies

1.0.6

Wed, 24 Mar 2021 10:17:01 GMT

Patches

• Enabling eslint

1.0.5

Tue, 23 Mar 2021 13:40:42 GMT

Patches

• Adding esm module export

1.0.4

Wed, 17 Mar 2021 10:01:28 GMT

Patches

• Adding readme

1.0.3

Fri, 19 Feb 2021 09:41:17 GMT

Patches

• bump

1.0.2

Thu, 18 Feb 2021 10:55:53 GMT

Patches

• removed stylesheet

1.0.1

Fri, 05 Feb 2021 09:50:54 GMT

Patches

• target es5

1.0.0

Thu, 04 Feb 2021 08:46:45 GMT

Breaking changes

• Adding component

Figma

Sometimes it can take some time until Figma will render component inside embed iframe. Try to click plus icon to 'reset' initial loader. (Works only in Chrome)

Click me to open figma in the new card