Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stephane-monnot/react-vertical-timeline
Vertical timeline for React.js
https://github.com/stephane-monnot/react-vertical-timeline
react react-components reactjs timeline vertical-timeline
Last synced: 1 day ago
JSON representation
Vertical timeline for React.js
- Host: GitHub
- URL: https://github.com/stephane-monnot/react-vertical-timeline
- Owner: stephane-monnot
- License: mit
- Created: 2017-10-26T22:06:31.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-01-02T21:22:07.000Z (12 months ago)
- Last Synced: 2024-12-04T22:04:36.654Z (9 days ago)
- Topics: react, react-components, reactjs, timeline, vertical-timeline
- Language: CSS
- Homepage: https://stephane-monnot.github.io/react-vertical-timeline/
- Size: 21.1 MB
- Stars: 1,089
- Watchers: 10
- Forks: 162
- Open Issues: 39
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](http://travis-ci.org/stephane-monnot/react-vertical-timeline) [](https://david-dm.org/stephane-monnot/react-vertical-timeline)
# react-vertical-timeline-component - Vertical timeline for React.js
## Full documentation & Demo
[React Vertical Timeline documentation](https://stephane-monnot.github.io/react-vertical-timeline/)
## Install
```code
$ npm i react-vertical-timeline-component
```
## Usage
```code|lang-jsx
---
import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';
import 'react-vertical-timeline-component/style.min.css';
...
}
>
Creative Director
Miami, FL
Creative Direction, User Experience, Visual Design, Project Management, Team Leading
}
>
Art Director
San Francisco, CA
Creative Direction, User Experience, Visual Design, SEO, Online Marketing
}
>
Web Designer
Los Angeles, CA
User Experience, Visual Design
}
>
Web Designer
San Francisco, CA
User Experience, Visual Design
}
>
Content Marketing for Web, Mobile and Social Media
Online Course
Strategy, Social Media
}
>
Agile Development Scrum Master
Certification
Creative Direction, User Experience, Visual Design
}
>
Bachelor of Science in Interactive Digital Media Visual Imaging
Bachelor Degree
Creative Direction, Visual Design
}
/>
```
## VerticalTimeline Props
### `animate={ Boolean }`
Enable or disable animations on elements (default: true).
### `className={ String }`
Add extra class name to root div element.
### `layout={ String }`
Choose if you want `'1-column-left'` or `'1-column-right'` or `'2-columns'` (default: `'2-columns'`).
### `lineColor={ String }`
Choose a color for the timeline (default: `'white'`).
## VerticalTimelineElement Props
### `className={ String }`
Add extra class name to root div element.
### `contentArrowStyle={ Object }`
Add extra style to content arrow div element.
### `contentStyle={ Object }`
Add extra style to content div element.
### `date={ String }`
Date of the element.
### `dateClassName={ String }`
Add extra class name to the element's date.
### `icon={ String }`
Icon of the element.
### `iconClassName={ String }`
Add extra class name to the element's icon.
### `shadowSize={ String }`
Shadow size for icon (default: `'small'`). Available sizes are `'small'`, `'medium'` and `'large'`.
### `iconOnClick={ Function }`
onClick handler of the element's icon.
### `onTimelineElementClick={ Function }`
onClick handler of the vertical timeline element's div.
### `iconStyle={ Object }`
Style of the element's icon.
### `position={ String }`
Position of the element (left or right).
### `style={ Object }`
Add extra style to root div element.
### `textClassName={ String }`
Add extra class name to the text container.
### `intersectionObserverProps={ Object }`
Custom props pass to `useInView` component (default: { rootMargin: '0px 0px 40px 0px' }).
*See [react-intersection-observer](https://github.com/thebuilder/react-intersection-observer) for more information.*
### `visible={ Boolean }`
Show element by default even if it is outside of the viewport (default: false).
## Showcase
* [My resume (Stéphane Monnot)](https://stephanemonnot.com/).
## For development
### Launch the demo with catalog
```code
$ yarn start
```
### Run the tests
```code
$ yarn test
```
### Watch and Run the tests
```code
$ yarn test:watch
```
### Run lint
```code
$ yarn test:lint
```
### Publish new version (only for maintainers)
```code
$ yarn publish
```
## License
*react-vertical-timeline-component* is available under MIT. See LICENSE for more details.