Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
react-chrono
Advanced tools
A Flexible Timeline component for React
Try it on CoderSandbox!
✅ Modes - Render timelines in three unique modes.
✅ Tree - Use the Tree
mode to layout timeline cards vertically in a tree like fashion.
✅ Slideshow - Auto play the timeline in slideshow
mode.
✅ Keyboard Support - Navigate the timelines using UP , DOWN keys in vertical
or tree
mode. In horizontal
mode LEFT , RIGHT keys can be used.
✅ Custom theme - Customize the colors using the theme
prop
yarn install react-chrono
Please make sure you wrap the component in a container that has a width
and height
. When no mode
is specified, the component defaults to HORIZONTAL
mode.
Use the items
prop to create the timeline. Each Timeline item have the following properties.
title
, contentTitle
, contentText
, contentDetailedText
Here is an example Timeline with minimal settings.
const items = [{
title: "May 1940",
contentTitle: "Dunkirk",
contentText:"Men of the British Expeditionary Force (BEF) wade out to a destroyer during the evacuation from Dunkirk.",
contentDetailedText: "On 10 May 1940, Hitler began his long-awaited offensive in the west...",
}, ...];
<div style={{ width: "500px", height: "400px" }}>
<chrono items={items} />
</div>
To render the timeline vertically use the VERTICAL
mode
<div style={{ width: "500px", height: "950px" }}>
<chrono
items={items}
mode="VERTICAL"
/>
</div>
In Tree
mode the timeline is rendered vertically with cards alternating between left and right sides.
<div style={{ width: "500px", height: "950px" }}>
<chrono
items={items}
mode="TREE"
/>
</div>
Play the timeline automatically with the slideShow
mode.
<div style={{ width: "500px", height: "950px" }}>
<chrono
items={items}
slideShow
/>
</div>
name | description | default |
---|---|---|
mode | sets the layout for the timeline component. can be HORIZONTAL , VERTICAL or TREE | HORIZONTAL |
items | collection of timeline items | [] |
disableNavOnKey | disables keyboard navigation | false |
slideShow | starts the timeline in slideshow mode | false |
slideItemDuration | The amount of delay in ms for the timeline points in slideshow mode | 2500 |
titlePosition | sets the position of the title in HORIZONTAL mode. can be TOP or BOTTOM | TOP |
itemWidth | width of the timeline section in HORIZONTAL mode | 320 |
react-chrono
supports three modes HORIZONTAL
, VERTICAL
and TREE
. The mode prop can be used to define the orientation of the cards.
The timeline by default can be navigated via keyboard.
HORIZONTAL
mode use your LEFT RIGHT arrow keys for navigation.VERTICAL
or TREE
mode, the timeline can be navigated via the UP DOWN arrow keys.The keyboard navigation can be completely disabled by setting the disableNavOnKey
to true.
<chrono items={items} disableNavOnKey />
Slideshow can be enabled by setting the slideShow
prop to true. You can also set an optional slideItemDuration
that sets the time delay between cards.
<chrono items={items} slideShow slideItemDuration={4500} />
This setting only applies for the HORIZONTAL
mode. The prop titlePosition
sets the position of the individual titles to either TOP
or BOTTOM
.
<chrono items={items} titlePosition="BOTTOM" />
The itemWidth
prop can be used to set the width of each individual timeline sections. This setting is applicable only for the HORIZONTAL
mode.
Prabhu Murthy – @prabhumurthy2 – prabhu.m.murthy@gmail.com
Distributed under the MIT license. See LICENSE
for more information.
FAQs
A Modern Timeline component for React
The npm package react-chrono receives a total of 5,799 weekly downloads. As such, react-chrono popularity was classified as popular.
We found that react-chrono demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.