⛓ React chronology component providing dual chronological timelines.

npm install react-chronos --save

import Chronology from 'react-chronos';

<Chronology type="vertical">
    {events.map(event => (
        <div class="marker"></div>
        <div class="event">{ event.details }</div>
    ))}
</Chronology>

The Chronology component is the main and only component provided by react-chronos. It accepts the following properties:

The type of chronology and timeline to render. It can one of the following values: horizontal or vertical. If not specified, the default will be vertical.

The query selector to use to find events inside the chronology.

The query selector to use to find markers inside the chronology.

The object that defines the class names to be applied to markers. The shape of the object and its default values is as follow:

{
    left: 'marker-left',
    right: 'marker-right',
    top: 'marker-top',
    bottom: 'marker-bottom',
}

For a vertical chronology the values for left and right will be applied to markers where its related event was positioned to any of those sides. The same behavior goes for horizontal chronology using top and bottom.

The object that defines the inline styles to be applied to markers. The shape of the object and its default values is as follow:

{
    left: {},
    right: {},
    top: {},
    bottom: {},
}

For a vertical chronology the values for left and right will be applied to markers where its related event was positioned to any of those sides. The same behavior goes for horizontal chronology using top and bottom.

TBD

# For quick development and hot reload...
npm run storybook

# For building the distribution package...
npm start

TBD

npm test