React-Chrono crosses 2000 🌟 on Github, ver 1.7 released with support for rendering custom content
Tags: react, webdev, opensource
Published: 2020-11-10 06:11:16

---
title: React-Chrono crosses 2000 🌟 on Github, ver 1.7 released with support for rendering custom content
published: true
description:
tags: react, webdev, opensource
---

## What is react-chrono

[react-chrono](https://github.com/prabhuignoto/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.

{% link https://dev.to/prabhuignoto/flexible-timeline-component-for-react-21gd %}

## 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` and `VERTICAL_ALTERNATING` modes.
- New scrollable option to allow free scrolling on `VERTICAL` and `VERTICAL_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.

```sh
  <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>
```

![custom](https://dev-to-uploads.s3.amazonaws.com/i/sdiyk5zdx35rftiqn5ok.png)

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.

```sh
  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.

```sh
  <Chrono
    items={items}
    mode="VERTICAL"
    flipLayout
  />
```

![flip](https://dev-to-uploads.s3.amazonaws.com/i/x8ej2fafuugk3lv1wyx9.png)

## Scrollable

The `scrollable` enables free scrolling on `VERTICAL` and `VERTICAL_ALTERNATING` modes.The scrollbars are hidden by default. To enable scrollbars set `scrollbar:true`.

```sh
  <Chrono
    items={items}
    mode="VERTICAL"
    scrollable={{scrollbar:  true}}
  />
```

![scrollbar](https://dev-to-uploads.s3.amazonaws.com/i/rvuka08n04kvl5i8ymho.png)

## Card positioning in Horizontal Mode

Now the cards can be positioned to either `TOP` or `BOTTOM`.

```sh
  <Chrono
    items={items}
    mode="HORIZONTAL"
    cardPositionHorizontal="TOP"
  />
```

![cardposition](https://dev-to-uploads.s3.amazonaws.com/i/uqqlgiperzp0bk8xhuz1.png)

## 📦 CodeSandbox Examples

- [Horizontal Basic](https://codesandbox.io/s/keen-shannon-gtjwn?file=/src/App.js)
- [Vertical basic](https://codesandbox.io/s/react-chrono-vertical-basic-0rm1o?file=/src/App.js)
- [Vertical Alternating](https://codesandbox.io/s/react-chrono-tree-text-1fcs3?file=/src/App.js)

## 🙏 Thank You

[react-chrono](https://github.com/prabhuignoto/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](https://twitter.com/prabhumurthy2)

You can also check out some of my other work here [prabhumurthy.com](https://www.prabhumurthy.com)