Prabhu Murthy

Posted on Nov 10, 2020

React-Chrono crosses 2000 🌟 on Github, ver 1.7 released with support for rendering custom content

#webdev #react #opensource

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

#react #typescript #opensource #webdev

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.

  <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

DEV Community