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 timeline component for React
Vertically
or Horizontally
.Tree
mode the individual timeline content boxes are alternated between left and right.Slideshow
starts the component in Slideshow mode. The component automatically plays the series for you.vertical
or tree
mode. In horizontal
mode LEFT , RIGHT keys can be used for navigation.yarn install react-chrono
react-chrono
has some great defaults to get you started quickly.
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 by invading neutral Holland and Belgium and attacking northern France...",
}, ...];
<div style={{ width: "500px", height: "400px" }}>
<chrono items={items} />
</div>
react-chrono
also supports a Tree mode.
<div style={{ width: "500px", height: "950px" }}>
<chrono
items={items}
mode="TREE"
/>
</div>
<div style={{ width: "500px", height: "950px" }}>
<chrono
items={items}
mode="TREE"
slideShow
/>
</div>
name | description | default |
---|---|---|
mode | sets the layout for the timeline component. can be HORIZONTAL , VERTICAL or TREE | HORIZONTAL |
disableNavOnKey | disables timeline navigation through keyboard | false |
slideShow | starts the timeline in slideshow mode | |
slideItemDuration | delay between timeline points during a slideshow | 2500 |
titlePosition | sets the position of the title in HORIZONTAL mode | 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, navigation can be done 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.