What is react-chrono
react-chrono is a modern Timeline component built for react. It comes with 3 different layouts and is highly customizable.
Please follow the below post for a detailed getting started guide.
Introducing react-chrono - A flexible Timeline component for React
Prabhu Murthy ・ Sep 18 '20
Whats new
- Custom rendering: The component now supports rendering custom content in the Timeline cards.
- Accessiblity: With 1.7 both the general accessiblity and the keyboard accessibility of the component has been greatly improved.
- Ability to flip the layout(RTL). A new prop added to flip the layout on both
VERTICAL
andVERTICAL_ALTERNATING
modes. - New scrollable option to allow free scrolling on
VERTICAL
andVERTICAL_ALTERNATING
modes. - New option to position the card in
HORIZONTAL
mode. - The latest version also includes bug fixes and various UX improvements.
Custom rendering
To insert custom content, just pass the blocked elements between the Chrono tags.
Each div element is automatically converted into a timeline item and inserted into the timeline card. The items collection is completely optional and custom rendering is supported on all 3 modes.
<Chrono
mode="VERTICAL_ALTERNATING"
scrollable
>
<div>
<div style={{width: "250px", height: "250px"}}>
<img style={{maxWidth: "100%", maxHeight: "100%"}} src="https://cdn.tutsplus.com/net/uploads/2013/08/github-collab-retina-preview.gif"/>
</div>
</div>
<div>
<h3>This is a List</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div>
<h3>Dunkirk</h3>
<p>
The Battle of Dunkirk (French: Bataille de Dunkerque) was fought in Dunkirk (Dunkerque), France, during the Second World War, between the Allies and Nazi Germany.
</p>
</div>
<div style={{margin: "1rem"}}>
<h3>Table</h3>
<table>
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 5</td>
<td>Value 6</td>
</tr>
</tbody>
</table>
</div>
</Chrono>
The items collection will also work nicely with any custom content that is passed. The following snippet sets the the title and cardTitle for the custom contents.
const items = [
{title: "Timeline title 1", cardTitle: "Card Title 1"},
{title: "Timeline title 2", cardTitle: "Card Title 2"}
];
<Chrono mode="VERTICAL" items={items}>
<div>
<p>Lorem Ipsum. Lorem Ipsum. Lorem Ipsum</p>
</div>
<div>
<img src="<url to a nice image" />
</div>
</Chrono>
Flip layout
A new prop added to flip the layout in VERTICAL
and VERTICAL_ALTERNATING
modes. This will be useful for react apps that use RTL(right to left) rendering.
<Chrono
items={items}
mode="VERTICAL"
flipLayout
/>
Scrollable
The scrollable
enables free scrolling on VERTICAL
and VERTICAL_ALTERNATING
modes.The scrollbars are hidden by default. To enable scrollbars set scrollbar:true
.
<Chrono
items={items}
mode="VERTICAL"
scrollable={{scrollbar: true}}
/>
Card positioning in Horizontal Mode
Now the cards can be positioned to either TOP
or BOTTOM
.
<Chrono
items={items}
mode="HORIZONTAL"
cardPositionHorizontal="TOP"
/>
📦 CodeSandbox Examples
🙏 Thank You
react-chrono achieved a major milestone of crossing 2000 stars on Github. I would like to thank everyone who supported the project so far and also those who shared their honest feedback. The new release is the result of those great feedbacks, ideas and suggestions.
Follow me on Twitter @prabhumurthy2
You can also check out some of my other work here prabhumurthy.com
Top comments (0)