{"id":14383895,"url":"https://github.com/stephane-monnot/react-vertical-timeline","last_synced_at":"2025-05-13T21:07:24.129Z","repository":{"id":41156426,"uuid":"108470623","full_name":"stephane-monnot/react-vertical-timeline","owner":"stephane-monnot","description":"Vertical timeline for React.js","archived":false,"fork":false,"pushed_at":"2024-12-11T14:51:50.000Z","size":23039,"stargazers_count":1130,"open_issues_count":44,"forks_count":171,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-28T12:13:34.513Z","etag":null,"topics":["react","react-components","reactjs","timeline","vertical-timeline"],"latest_commit_sha":null,"homepage":"https://stephane-monnot.github.io/react-vertical-timeline/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stephane-monnot.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-26T22:06:31.000Z","updated_at":"2025-04-27T12:44:52.000Z","dependencies_parsed_at":"2023-01-26T04:30:30.029Z","dependency_job_id":"fb727a0b-f6e3-4e2e-bd89-b38de7b9973d","html_url":"https://github.com/stephane-monnot/react-vertical-timeline","commit_stats":{"total_commits":182,"total_committers":17,"mean_commits":"10.705882352941176","dds":0.2637362637362637,"last_synced_commit":"c99830b0d78c635dde646e89155aa7e1b6aa029b"},"previous_names":[],"tags_count":49,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stephane-monnot%2Freact-vertical-timeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stephane-monnot%2Freact-vertical-timeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stephane-monnot%2Freact-vertical-timeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stephane-monnot%2Freact-vertical-timeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stephane-monnot","download_url":"https://codeload.github.com/stephane-monnot/react-vertical-timeline/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251311332,"owners_count":21569009,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-components","reactjs","timeline","vertical-timeline"],"created_at":"2024-08-28T18:01:03.008Z","updated_at":"2025-04-28T12:13:42.135Z","avatar_url":"https://github.com/stephane-monnot.png","language":"CSS","funding_links":[],"categories":["CSS","React","UI Components"],"sub_categories":["React Components","Timeline"],"readme":"[![build status](https://secure.travis-ci.org/stephane-monnot/react-vertical-timeline.svg)](http://travis-ci.org/stephane-monnot/react-vertical-timeline) [![Dependency Status](https://david-dm.org/stephane-monnot/react-vertical-timeline.svg)](https://david-dm.org/stephane-monnot/react-vertical-timeline)\n\n# react-vertical-timeline-component - Vertical timeline for React.js\n![alt tag](https://i.imgur.com/X7Tefzr.gif)\n\n## Full documentation \u0026 Demo\n\n[React Vertical Timeline documentation](https://stephane-monnot.github.io/react-vertical-timeline/)\n\n\n## Install\n\n```code\n$ npm i react-vertical-timeline-component\n```\n\n\n## Usage\n\n```code|lang-jsx\n---\nimport { VerticalTimeline, VerticalTimelineElement }  from 'react-vertical-timeline-component';\nimport 'react-vertical-timeline-component/style.min.css';\n\n...\n\n\u003cVerticalTimeline\u003e\n  \u003cVerticalTimelineElement\n    className=\"vertical-timeline-element--work\"\n    contentStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}\n    contentArrowStyle={{ borderRight: '7px solid  rgb(33, 150, 243)' }}\n    date=\"2011 - present\"\n    iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}\n    icon={\u003cWorkIcon /\u003e}\n  \u003e\n    \u003ch3 className=\"vertical-timeline-element-title\"\u003eCreative Director\u003c/h3\u003e\n    \u003ch4 className=\"vertical-timeline-element-subtitle\"\u003eMiami, FL\u003c/h4\u003e\n    \u003cp\u003e\n      Creative Direction, User Experience, Visual Design, Project Management, Team Leading\n    \u003c/p\u003e\n  \u003c/VerticalTimelineElement\u003e\n  \u003cVerticalTimelineElement\n    className=\"vertical-timeline-element--work\"\n    date=\"2010 - 2011\"\n    iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}\n    icon={\u003cWorkIcon /\u003e}\n  \u003e\n    \u003ch3 className=\"vertical-timeline-element-title\"\u003eArt Director\u003c/h3\u003e\n    \u003ch4 className=\"vertical-timeline-element-subtitle\"\u003eSan Francisco, CA\u003c/h4\u003e\n    \u003cp\u003e\n      Creative Direction, User Experience, Visual Design, SEO, Online Marketing\n    \u003c/p\u003e\n  \u003c/VerticalTimelineElement\u003e\n  \u003cVerticalTimelineElement\n    className=\"vertical-timeline-element--work\"\n    date=\"2008 - 2010\"\n    iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}\n    icon={\u003cWorkIcon /\u003e}\n  \u003e\n    \u003ch3 className=\"vertical-timeline-element-title\"\u003eWeb Designer\u003c/h3\u003e\n    \u003ch4 className=\"vertical-timeline-element-subtitle\"\u003eLos Angeles, CA\u003c/h4\u003e\n    \u003cp\u003e\n      User Experience, Visual Design\n    \u003c/p\u003e\n  \u003c/VerticalTimelineElement\u003e\n  \u003cVerticalTimelineElement\n    className=\"vertical-timeline-element--work\"\n    date=\"2006 - 2008\"\n    iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}\n    icon={\u003cWorkIcon /\u003e}\n  \u003e\n    \u003ch3 className=\"vertical-timeline-element-title\"\u003eWeb Designer\u003c/h3\u003e\n    \u003ch4 className=\"vertical-timeline-element-subtitle\"\u003eSan Francisco, CA\u003c/h4\u003e\n    \u003cp\u003e\n      User Experience, Visual Design\n    \u003c/p\u003e\n  \u003c/VerticalTimelineElement\u003e\n  \u003cVerticalTimelineElement\n    className=\"vertical-timeline-element--education\"\n    date=\"April 2013\"\n    iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}\n    icon={\u003cSchoolIcon /\u003e}\n  \u003e\n    \u003ch3 className=\"vertical-timeline-element-title\"\u003eContent Marketing for Web, Mobile and Social Media\u003c/h3\u003e\n    \u003ch4 className=\"vertical-timeline-element-subtitle\"\u003eOnline Course\u003c/h4\u003e\n    \u003cp\u003e\n      Strategy, Social Media\n    \u003c/p\u003e\n  \u003c/VerticalTimelineElement\u003e\n  \u003cVerticalTimelineElement\n    className=\"vertical-timeline-element--education\"\n    date=\"November 2012\"\n    iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}\n    icon={\u003cSchoolIcon /\u003e}\n  \u003e\n    \u003ch3 className=\"vertical-timeline-element-title\"\u003eAgile Development Scrum Master\u003c/h3\u003e\n    \u003ch4 className=\"vertical-timeline-element-subtitle\"\u003eCertification\u003c/h4\u003e\n    \u003cp\u003e\n      Creative Direction, User Experience, Visual Design\n    \u003c/p\u003e\n  \u003c/VerticalTimelineElement\u003e\n  \u003cVerticalTimelineElement\n    className=\"vertical-timeline-element--education\"\n    date=\"2002 - 2006\"\n    iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}\n    icon={\u003cSchoolIcon /\u003e}\n  \u003e\n    \u003ch3 className=\"vertical-timeline-element-title\"\u003eBachelor of Science in Interactive Digital Media Visual Imaging\u003c/h3\u003e\n    \u003ch4 className=\"vertical-timeline-element-subtitle\"\u003eBachelor Degree\u003c/h4\u003e\n    \u003cp\u003e\n      Creative Direction, Visual Design\n    \u003c/p\u003e\n  \u003c/VerticalTimelineElement\u003e\n  \u003cVerticalTimelineElement\n    iconStyle={{ background: 'rgb(16, 204, 82)', color: '#fff' }}\n    icon={\u003cStarIcon /\u003e}\n  /\u003e\n\u003c/VerticalTimeline\u003e\n```\n\n\n## VerticalTimeline Props\n\n### `animate={ Boolean }`\n\nEnable or disable animations on elements (default: true).\n\n### `className={ String }`\n\nAdd extra class name to root div element.\n\n### `layout={ String }`\n\nChoose if you want `'1-column-left'` or `'1-column-right'` or `'2-columns'` (default: `'2-columns'`).\n\n### `lineColor={ String }`\n\nChoose a color for the timeline (default: `'white'`).\n\n## VerticalTimelineElement Props\n\n### `className={ String }`\n\nAdd extra class name to root div element.\n\n### `contentArrowStyle={ Object }`\n\nAdd extra style to content arrow div element.\n\n### `contentStyle={ Object }`\n\nAdd extra style to content div element.\n\n### `date={ String }`\n\nDate of the element.\n\n### `dateClassName={ String }`\n\nAdd extra class name to the element's date.\n\n### `icon={ String }`\n\nIcon of the element.\n\n### `iconClassName={ String }`\n\nAdd extra class name to the element's icon.\n\n### `shadowSize={ String }`\n\nShadow size for icon (default: `'small'`). Available sizes are `'small'`, `'medium'` and `'large'`.\n\n### `iconOnClick={ Function }`\n\nonClick handler of the element's icon.\n\n### `onTimelineElementClick={ Function }`\n\nonClick handler of the vertical timeline element's div.\n\n### `iconStyle={ Object }`\n\nStyle of the element's icon.\n\n### `position={ String }`\n\nPosition of the element (left or right).\n\n### `style={ Object }`\n\nAdd extra style to root div element.\n\n### `textClassName={ String }`\n\nAdd extra class name to the text container.\n\n### `intersectionObserverProps={ Object }`\n\nCustom props pass to `useInView` component (default: { rootMargin: '0px 0px 40px 0px' }).\n*See [react-intersection-observer](https://github.com/thebuilder/react-intersection-observer) for more information.*\n\n### `visible={ Boolean }`\n\nShow element by default even if it is outside of the viewport (default: false).\n\n\n## Showcase\n\n* [My resume (Stéphane Monnot)](https://stephanemonnot.com/).\n\n\n## For development\n### Launch the demo with catalog\n```code\n$ yarn start\n```\n\n### Run the tests\n```code\n$ yarn test\n```\n\n### Watch and Run the tests\n```code\n$ yarn test:watch\n```\n\n### Run lint\n```code\n$ yarn test:lint\n```\n\n### Publish new version (only for maintainers)\n```code\n$ yarn publish\n```\n\n## License\n\n*react-vertical-timeline-component* is available under MIT. See LICENSE for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstephane-monnot%2Freact-vertical-timeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstephane-monnot%2Freact-vertical-timeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstephane-monnot%2Freact-vertical-timeline/lists"}