React Chrono

The Ultimate Timeline Component for React Applications

React Chrono allows developers to create stunning, interactive timelines, providing rich media support, accessibility-focused design, and extensive customization options. Build compelling narratives that engage users and enhance their experiences with an intuitive timeline interface.

✨ Key Features

• Flexible Storytelling: Choose from four distinct layout modes to best present your narrative. Whether it's a horizontal view for classic storylines, vertical design for mobile-first applications, alternating layouts for visual appeal, or a comprehensive dashboard overview, React Chrono adapts seamlessly to diverse use cases such as company milestones, historical timelines, project roadmaps, or personal journeys.

• Modern Development Experience: Built entirely in TypeScript, React Chrono offers a grouped API that organizes props into logical sections for clarity and usability. Enjoy exceptional IDE support with intelligent autocomplete and type checking, all while maintaining a lightweight foundation free from external dependencies.

• Complete Customization: With over 25 theme properties at your disposal, achieve pixel-perfect designs ranging from personalized brand colors to extensive dark mode transformations. Effortlessly integrate Google Fonts and embed custom React components within timeline cards for tailored experiences.

• Production-Ready Performance: React Chrono is optimized for performance with native lazy loading for images and IntersectionObserver-managed visibility. Automatic video pause features ensure smooth interactions even with large datasets while maintaining cross-browser compatibility and complying with comprehensive WCAG AA accessibility standards.

🚀 Quick Start Examples

Get started easily with a minimal setup, employing just two lines of code to display a timeline:

import { Chrono } from 'react-chrono';

const items = [
  { title: 'May 1940', cardTitle: 'Dunkirk', cardDetailedText: 'Allied evacuation from France' },
  { title: 'June 1944', cardTitle: 'D-Day', cardDetailedText: 'Normandy invasion begins' }
];

<Chrono items={items} />

📅 Timeline Modes

React Chrono offers:

• Horizontal Mode for classic storytelling.
• Vertical Mode optimized for mobile device use.
• Alternating Mode for a visually balanced presentation.
• Dashboard Overview to display all timeline items simultaneously.

🎨 Theming & Branding

Implement a comprehensive theming system to match your visual identity. Dark mode properties are readily available, alongside robust Google Fonts integration for optimized typography adjustments.

🌍 Internationalization

Customize user-facing text for any language or locale with support for over 40 configurable text elements, ensuring a global usability standard.

🤝 Contributing & Getting Support

Contributions are welcome. For information on how to get involved, see the Contributing Guide. Support the project by starring on GitHub.

💻 Built With Modern Technologies

React Chrono leverages the power of:

• React 18+ for utilizing modern React features.
• TypeScript for type safety and better development tooling.
• Vanilla Extract for zero-runtime CSS-in-JS.

For more details, explore the Props Reference and extensive API documentation.