react-chrono

(★ 4,199)

Modern Timeline Component for React

File Explorer

Download Latest Version (.zip)

- - bug_report.md
  - feature_request.md
- - chromatic.yml
  - ci.yml
  - coveralls.yml
  - playwright.yml.disabled
  - release.yml
  - size-limit.yml.disabled
  - snyk.yaml
- dependabot.yml.disabled
- FUNDING.yml
- PULL_REQUEST_TEMPLATE.md
- main.ts
- preview.tsx
- settings.json
- - eslint.config.mjs
  - vite.config.mts
  - vite.site.config.mts
  - vitest.config.mts
- - browserstack.json
  - playwright-ct.config.ts
  - playwright.config.ts
  - playwright.integration.config.ts
- - _placeholder.css
  - cssesc-path.mjs
  - cssesc-wrapper.js
  - postcss.config.js
  - stylelint.config.js
  - tailwind.config.js
- QUICK_REFERENCE.md
- REACT_CHRONO_API_CATALOG.md
- react_chrono_issues_tracker.csv
- camera.svg
- color-circle.svg
- d-day.mp4
- dunkirk.mp4
- favicon.ico
- github copy.svg
- github.svg
- grid.svg
- list.svg
- manifest.json
- notification-bell.svg
- operation-barbarasso.mp4
- pearl-harbor.mp4
- robots.txt
- rss.svg
- satellite-dish.svg
- zap.svg
- zapold.svg
- dark_mode.png
- horizontal-all.jpg
- logo.png
- social-logo-small.png
- text_overlay.jpg
- timeline-with-media.jpg
- vertical_alternating.jpg
- vertical_alternating_full.jpg
- vertical_alternating_mode.png
- vertical_basic.jpg
- vertical_mode.jpg
- vertical_mode_high_density.png
- - GlobalContext.tsx
  - index.tsx
- - App.css.ts
  - App.styles.css
  - App.tsx
  - array-map-dynamic.tsx
  - auto-card-height.tsx
  - custom-theme-example.tsx
  - dynamic-load.tsx
  - layout.module.scss
  - layout.tsx
  - README.md
- - PRIORITY_MIGRATION_PLAN.md
- - basic-horizontal.tsx
  - basic-slideshow.tsx
  - basic-vertical.tsx
  - data.ts
  - slideshow-with-overall-progress.tsx
- - index.ts
  - useBackground.ts
  - useCardSize.ts
  - useEscapeKey.ts
  - useFocusManager.ts
  - useFullscreen.ts
  - useI18n.ts
  - useMeasureHeight.ts
  - useMediaState.ts
  - useOutsideClick.ts
  - useSlideshowProgress.ts
  - useTimelineItemNavigation.ts
  - useTimelineKeyboardNavigation.ts
  - useTimelineMedia.ts
  - useTimelineMode.ts
  - useTimelineNavigation.ts
  - useTimelineScroll.ts
  - useTimelineScrolling.ts
  - useTimelineSearch.ts
  - useUIState.ts
  - useVirtualizedVerticalTimeline.ts
  - useWindowSize.ts
  - utils.ts
- - Theme.ts
  - TimelineCardTitleModel.ts
  - TimelineConfig.ts
  - TimelineContentModel.ts
  - TimelineControlModel.ts
  - TimelineHorizontalModel.ts
  - TimelineI18n.ts
  - TimelineItemModel.ts
  - TimelineMediaModel.ts
  - TimelineModel.ts
  - TimelinePropsV2.ts
  - TimelineVerticalModel.ts
  - ToolbarItem.ts
  - ToolbarProps.ts
- - a11y.css.ts
  - animations.css.ts
  - design-system.css.ts
  - global.css.ts
  - index.css.ts
  - index.ts
  - layout.css.ts
  - scrollbar.css.ts
  - theme-bridge.ts
  - themes.css.ts
  - tokens.css.ts
  - types.ts
  - z-index.ts
- - test-wrapper.tsx
- - global.d.ts
- - comparison.ts
  - index.ts
  - mediaQueryUtils.ts
  - propMigration.ts
  - propUtils.ts
  - textResolver.ts
  - throttle.ts
  - timelineUtils.ts
  - validation.ts
- index.css
- index.tsx
- react-chrono.ts
- test-setup.js
- - StoryContainer.tsx
- - custom-content.stories.tsx
- - interactive.stories.tsx
- - media-support.stories.tsx
- - horizontal.stories.tsx
  - vertical.stories.tsx
- - theming.stories.tsx
- - example-component.spec.tsx
- - dynamic-load.spec.ts
  - timeline-accessibility.spec.ts
  - timeline-advanced-features.spec.ts
  - timeline-cardless-nested.spec.ts
  - timeline-cardless-nested.spec.ts.bak
  - timeline-comprehensive.spec.ts.disabled
  - timeline-horizontal.spec.ts
  - timeline-media.spec.ts
  - timeline-navigation-controls.spec.ts
  - timeline-nested-keyboard-nav.spec.ts
  - timeline-performance.spec.ts
  - timeline-theme-responsive.spec.ts
  - timeline-vertical-alternating.spec.ts
  - timeline-vertical.spec.ts
  - timeline-with-api.spec.ts.disabled
- - selector-map.ts
  - test-fixtures.ts
- - test-data.ts
  - timeline-helpers.ts
- - build-output.test.ts
  - demo-app.e2e.test.ts
  - README.md
- global-setup.ts
- run-tests.sh
- static.d.ts
.all-contributorsrc
.chromatic.json
.editorconfig
.gitignore
.kodiak.toml
.npmignore
.npmrc
.prettierignore
.prettierrc
.snyk
BACKLOG.md
bun.lock
CHANGELOG.md
CLAUDE.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
index.html
knip-report.json
knip.config.ts
LICENSE
package.json
pnpm-lock.yaml
PROPS-REFERENCE.md
README.md
SECURITY.md
tsconfig.build.json
tsconfig.dev.json
tsconfig.json

# Installation Guide

1. Get the code

git clone https://github.com/prabhuignoto/react-chrono

Downloads the entire project code from GitHub to your computer.

cd react-chrono

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install react-chrono

Downloads and installs the libraries listed in package.json.

yarn add react-chrono

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

react-chrono

File Explorer

# Installation Guide

2. Node.js

Today's picks

Was this content helpful?

Recent Feedback

react-chrono

File Explorer

# Installation Guide

2. Node.js

Today's picks

Was this content helpful?

Recent Feedback

Download README