sherubthakur / React Horizontal Timeline
[Not maintained] A Timeline component
Stars: ✭ 257
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Horizontal Timeline
thewhite
✒️ It's a minimal and light wordpress blog theme 🎨
Stars: ✭ 87 (-66.15%)
Mutual labels: timeline
vue-light-timeline
A mobile first lightweight vue timeline components
Stars: ✭ 88 (-65.76%)
Mutual labels: timeline
bitcoin-development-history
Data and a example for a open source timeline of the history of Bitcoin development
Stars: ✭ 27 (-89.49%)
Mutual labels: timeline
web3-is-going-great
A timeline of some of the greatest hits in cryptocurrencies, NFTs, and other web3 projects since the beginning of 2021
Stars: ✭ 334 (+29.96%)
Mutual labels: timeline
ForensicsTools
A list of free and open forensics analysis tools and other resources
Stars: ✭ 392 (+52.53%)
Mutual labels: timeline
timeline
Takes tweets from a bot's followings and markovifies them. Ruby port of sneaksnake/timeline
Stars: ✭ 13 (-94.94%)
Mutual labels: timeline
Kinetic
A flexible tweening library for iOS in Swift similar to GSAP's TweenMax.
Stars: ✭ 54 (-78.99%)
Mutual labels: timeline
TimelineCards
Presenting timelines as cards, single or bundled in scrollable feed!
Stars: ✭ 423 (+64.59%)
Mutual labels: timeline
notifyme
react-notification-timeline is a react based component helps in managing the notification in time-based manner.
Stars: ✭ 94 (-63.42%)
Mutual labels: timeline
TimelineView
A customizable and easy-to-use Timeline View library for Android. Works as a RecyclerView decorator (ItemDecoration)
Stars: ✭ 169 (-34.24%)
Mutual labels: timeline
vertical-timeline-component-react
A Timeline Component for React.js
Stars: ✭ 42 (-83.66%)
Mutual labels: timeline
timeline heatmap
A kibana visualization that uses swim lanes to visualize multiple sources over time. Each swim lane represents a source and the intervals of the date histogram are colored based on the metric defined at the given time.
Stars: ✭ 18 (-93%)
Mutual labels: timeline
react-native-beautiful-timeline
Fully customizable, beautifully designed Timeline for React Native.
Stars: ✭ 111 (-56.81%)
Mutual labels: timeline
React Horizontal Timeline
A react port of the horizontal time-line developed by CodyHouse. Here is a demo I hope you too are a fan of the elder scrolls.
NOTE
This package is no longer maintained by me. If you find it usefull and would like to be a maintainer for this package please contact me [email protected]
HorizontalTimeline
It will just render a timeline with the dates that you provided and it is up to you what to do when a date is selected. i.e. it will give you the index of the date that was clicked and you can do anything with it.
Property | Type | Default | Description |
---|---|---|---|
values (required) | array | undefined | sorted array of dates (format:yyyy-mm-dd) |
indexClick (required) | function | undefined | function that takes the index of the array as argument |
index (required) | number | undefined | the index of the selected date |
getLabel | function | date.toDateString().substring(4) | A function to calculate the label of the event based on the date of the event |
minEventPadding | number | 20 | The minimum padding between two event labels |
maxEventPadding | number | 120 | The maximum padding between two event labels |
linePadding | number | 100 | Padding used at the start and end of the timeline |
labelWidth | number | 85 | The width of an individual label |
fillingMotion | object | { stiffness: 150, damping: 25 } | Sets the animation style of how filling motion will look |
slidingMotion | object | { stiffness: 150, damping: 25 } | Sets the animation style of how sliding motion will look |
styles | object | { background: '#f8f8f8', foreground: '#7b9d6f', outline: '#dfdfdf' } | object containing the styles for the timeline currently outline (the color of the boundaries of the timeline and the buttons on it's either side), foreground (the filling color, active color) and background (the background color of your page) colors of the timeline can be changed. |
isTouchEnabled | boolean | true | Enable touch events (swipe left, right) |
isKeyboardEnabled | boolean | true | Enable keyboard events (up, down, left, right) |
isOpenBeginning | boolean | true | Show the beginning of the timeline as open ended |
isOpenEnding | boolean | true | Show the ending of the timeline as open ended |
This is how it can be used.
const VALUES = [ /* The date strings go here */ ];
export default class App extends React.Component {
state = { value: 0, previous: 0 };
render() {
return (
<div>
{/* Bounding box for the Timeline */}
<div style={{ width: '60%', height: '100px', margin: '0 auto' }}>
<HorizontalTimeline
index={this.state.value}
indexClick={(index) => {
this.setState({ value: index, previous: this.state.value });
}}
values={ VALUES } />
</div>
<div className='text-center'>
{/* any arbitrary component can go here */}
{this.state.value}
</div>
</div>
);
}
}
For more advanced usage take a look at the demos directory.
Running the development version
- Just clone the repo and do an
npm install
(oryarn install
) - Note: You will need to do
npm install react react-dom
to installpeerDependencies
as bothyarn
andnpm
don't do this. - Run
npm run start
/npm start
/yarn start
. - Then go to
localhost:5001/demos/<demo_name>/index.html
to see the fruits of your labor.
Here is the information provided by the original author.
An easy to customize, horizontal timeline powered by CSS and jQuery.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].