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
Try it on CodeSandbox!
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. Please check props for all the available options.
const Home = () => {
const items = [{
title: "May 1940",
contentTitle: "Dunkirk",
contentText:"Men of the British Expeditionary Force (BEF) wade out to..",
media: {
type: "IMAGE",
source: {
url: "http://someurl/image.jpg"
}
}
}, ...];
return (
<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 side.
<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
mode="TREE"
/>
</div>
name | description | default |
---|---|---|
mode | sets the layout of the component. can be HORIZONTAL , VERTICAL or TREE | HORIZONTAL |
items | collection of timeline items. This should be a collection of Timeline Item Model | [] |
disableNavOnKey | prop to disable 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 |
itemWidth | width of the timeline section in HORIZONTAL mode. | 300 |
theme | prop to customize the colors. | 300 |
react-chrono
supports three modes HORIZONTAL
, VERTICAL
and TREE
. No additional setting is required.
<chrono items={items} mode="HORIZONTAL" />
<chrono items={items} mode="VERTICAL" />
<chrono items={items} mode="TREE" />
name | description | type |
---|---|---|
title | title of the timeline item | String |
contentTitle | title that is displayed on the timeline card | String |
contentText | text displayed in the timeline card | String |
media | media object to set image. | Object |
{
title: "May 1940",
contentTitle: "Dunkirk",
media: {
name: "dunkirk beach",
source: {
url: "http://someurl/image.jpg"
},
type: "IMAGE"
},
contentText:
"Men of the British Expeditionary Force (BEF) wade out to a destroyer during the evacuation from Dunkirk."
}
The timeline 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.To disable eyboard navigation set 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} />
The itemWidth
prop can be used to set the width of each individual timeline sections. This setting is applicable only for the HORIZONTAL
mode.
Customize colors with theme
prop.
<chrono items={items} titlePosition="BOTTOM" theme={{primary: "red", secondary: "blue" }} />
# install dependencies
yarn install
# start dev setup
yarn run start
# run css linting
yarn run lint:css
# package lib
yarn run rollup
git checkout -b new-feature
)git commit -am 'Add feature'
)git push origin new-feature
)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.