You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The texts configuration provides internationalization support for all timeline text elements:
i18n: {texts: {navigation: {first: 'Go to first item',last: 'Go to last item',next: 'Next item',previous: 'Previous item',play: 'Start slideshow',stop: 'Stop slideshow',},search: {placeholder: 'Search Timeline',ariaLabel: 'Search timeline content',clearLabel: 'Clear Search',nextMatch: 'Next Match (Enter)',previousMatch: 'Previous Match (Shift+Enter)',resultsCount: '{current} of {total}',noResults: 'No results found',},theme: {darkMode: 'Switch to dark mode',lightMode: 'Switch to light mode',toggleTheme: 'Toggle theme',},fullscreen: {enterFullscreen: 'Enter fullscreen',exitFullscreen: 'Exit fullscreen',notSupported: 'Fullscreen not supported',},content: {readMore: 'Read More',showLess: 'Show Less',expand: 'Expand',collapse: 'Collapse',},// ... additional text categories}}
Text Categories
Category
Description
Covers
navigation
Navigation control labels
First, last, next, previous, play/stop buttons
search
Search functionality text
Search input, results, navigation
theme
Theme switching labels
Dark/light mode toggles
layout
Layout mode labels
Vertical, horizontal, alternating modes
fullscreen
Fullscreen functionality
Enter/exit fullscreen, error messages
quickJump
Quick navigation
Jump to item dropdown
content
Content interaction
Read more, expand/collapse
status
Loading and error states
Loading, error, empty states
accessibility
Screen reader labels
ARIA labels and descriptions
view
View options
Compact/detailed view toggles
keyboard
Keyboard help
Keyboard navigation instructions
Template String Support
Some text properties support template variables using {variable} syntax:
search: {resultsCount: '{current} of {total}',// "1 of 5"},accessibility: {itemPosition: 'Item {current} of {total}',// "Item 3 of 10"},quickJump: {itemTemplate: '{index}: {title}',// "1: My Title"}
Multi-language Example
// English (default)constenglishTexts={navigation: {first: 'Go to first item',last: 'Go to last item',next: 'Next item',previous: 'Previous item',},search: {placeholder: 'Search Timeline',clearLabel: 'Clear Search',}};// SpanishconstspanishTexts={navigation: {first: 'Ir al primer elemento',last: 'Ir al último elemento',next: 'Siguiente elemento',previous: 'Elemento anterior',},search: {placeholder: 'Buscar en la Línea de Tiempo',clearLabel: 'Limpiar Búsqueda',}};<Chronoitems={items}i18n={{texts: spanishTexts,locale: 'es'}}/>
Legacy Compatibility
The new i18n system is fully compatible with existing accessibility.buttonTexts configuration. When both are provided, i18n texts take precedence for supported properties.
consthandleItemSelected=({ item, index })=>{console.log('Selected item:',item.cardTitle);console.log('Item index:',index);};consthandleThemeChange=(newTheme)=>{console.log('Theme changed:',newTheme);// Save theme preferencelocalStorage.setItem('theme',JSON.stringify(newTheme));};<Chronoitems={items}onItemSelected={handleItemSelected}onThemeChange={handleThemeChange}onScrollEnd={()=>console.log('Reached end of timeline')}/>
🔄 Legacy Props (Deprecated)
These props are maintained for backward compatibility but are deprecated in favor of the grouped configuration API.
Complete TypeScript definitions for all interfaces and types.
Core Types
// Timeline modestypeTimelineMode='horizontal'|'vertical'|'alternating'|'horizontal-all';// Legacy mode mappingtypeLegacyTimelineMode='VERTICAL'|'HORIZONTAL'|'VERTICAL_ALTERNATING'|'HORIZONTAL_ALL';// Media typestypeMediaType='VIDEO'|'IMAGE';// Text density (legacy)typeTextDensity='LOW'|'HIGH';// Slideshow animation typestypeSlideShowType='reveal'|'slide_in'|'slide_from_sides';// New slideshow animation typestypeSlideshowAnimationType='reveal'|'slide'|'fade';// Media fit optionstypeMediaFit='cover'|'contain'|'fill'|'none'|'scale-down';// Font weightstypeFontWeight=|'thin'|'extra-light'|'light'|'regular'|'medium'|'semi-bold'|'bold'|'extra-bold'|'black'|100|200|300|400|500|600|700|800|900;// Font display strategiestypeFontDisplay='auto'|'block'|'swap'|'fallback'|'optional';// HTML tag options for semantic tagstypeHTMLTag='h1'|'h2'|'h3'|'h4'|'h5'|'h6'|'span'|'div';
interfaceI18nConfig{/** Complete internationalization configuration for all timeline texts */texts?: TimelineI18nConfig;/** Locale code (e.g., 'en', 'es', 'fr', 'de') for future locale-specific features */locale?: string;/** Text direction for RTL language support */direction?: 'ltr'|'rtl';}// Complete text configuration interface with all categoriesinterfaceTimelineI18nConfig{navigation?: NavigationTexts;search?: SearchTexts;theme?: ThemeTexts;layout?: LayoutTexts;fullscreen?: FullscreenTexts;quickJump?: QuickJumpTexts;content?: ContentTexts;status?: StatusTexts;accessibility?: AccessibilityTexts;view?: ViewTexts;keyboard?: KeyboardTexts;}
Dark Mode Configuration
interfaceDarkModeConfig{/** Enable dark mode */enabled?: boolean;/** Show dark mode toggle button in toolbar */showToggle?: boolean;}
Complete Props Interface
// New grouped API (Recommended)interfaceTimelinePropsV2{// Core propsitems: TimelineItem[];mode?: TimelineMode;children?: ReactNode|ReactNode[];theme?: Theme;activeItemIndex?: number;allowDynamicUpdate?: boolean;id?: string;// Grouped configurationslayout?: LayoutConfig;interaction?: InteractionConfig;content?: ContentConfig;display?: DisplayConfig;media?: MediaConfig;animation?: AnimationConfig;style?: StyleConfig;accessibility?: AccessibilityConfig;// Dark modedarkMode?: DarkModeConfig;// Event callbacksonItemSelected?: (data: {item: TimelineItem;index: number})=>void;onScrollEnd?: ()=>void;onThemeChange?: (theme: Theme)=>void;onRestartSlideshow?: ()=>void;}// Legacy props interface (for backward compatibility)interfaceLegacyTimelineProps{// All deprecated props listed in the legacy section above// ... (see Legacy Props section for complete list)}// Combined interfacetypeTimelineProps=TimelinePropsV2&LegacyTimelineProps;
📝 Usage Examples
Complete Configuration Example
import{Chrono}from'react-chrono';constApp=()=>{constitems=[{title: "2024-01-01",cardTitle: "New Year Launch",cardSubtitle: "Project Kickoff",cardDetailedText: "Started our new ambitious project with great enthusiasm.",media: {type: "IMAGE",source: {url: "/images/launch.jpg"},name: "Project launch ceremony"}},// ... more items];return(<divstyle={{width: '100vw',height: '100vh'}}><Chronoitems={items}mode="alternating"layout={{cardWidth: 450,cardHeight: 'auto',// Automatic sizing based on contentpointSize: 18,responsive: {enabled: true,breakpoint: 768,},}}interaction={{keyboardNavigation: true,pointClick: true,autoScroll: true,focusOnLoad: true,}}content={{allowHTML: false,readMore: true,dateFormat: 'MMM YYYY',semanticTags: {title: 'h2',subtitle: 'h3',},alignment: {horizontal: 'center',vertical: 'center',},}}display={{borderless: false,pointShape: 'circle',toolbar: {enabled: true,position: 'top',sticky: true,},}}media={{height: 200,align: 'center',fit: 'cover',}}animation={{slideshow: {enabled: true,duration: 3000,type: 'fade',showProgress: true,},}}style={{googleFonts: {fontFamily: 'Inter',elements: {cardTitle: {weight: 'bold',size: '1.2rem'},cardSubtitle: {weight: 'medium',size: '0.9rem'},},preconnect: true,},}}accessibility={{buttonTexts: {play: 'Start Timeline',stop: 'Pause Timeline',},}}theme={{primary: '#0079e6',cardBgColor: '#ffffff',cardTitleColor: '#1f2937',}}darkMode={{enabled: false,showToggle: true,}}onItemSelected={({ item, index })=>{console.log(`Selected: ${item.cardTitle} at index ${index}`);}}onThemeChange={(theme)=>{console.log('Theme updated:',theme);}}/></div>);};
📚 For more examples and interactive demos, visit our Storybook