DEV Community: Prabhu Murthy

React Chrono v3.0: Redefining Timeline Components for Modern React

Prabhu Murthy — Wed, 15 Oct 2025 10:27:24 +0000

React Chrono v3.0: A Complete Evolution

We're thrilled to announce React Chrono v3.0, the most significant release in the library's history. After months of development and a complete architectural overhaul, v3.0 delivers enhanced performance, developer experience, and a rich set of new features while maintaining backward compatibility with your existing code.

What's New at a Glance

React Chrono v3.0 introduces:

🎨 Zero-runtime CSS with Vanilla Extract migration
🌐 Comprehensive internationalization
🎭 Google Fonts integration with per-element font control
🖼️ Fullscreen mode with cross-browser support
🎯 Grouped configuration API for better developer experience
🎪 Enhanced dark mode with 36 theme properties (13 new in v3.0)
📌 Sticky toolbar for always-accessible controls
🔍 Advanced search with configurable dimensions

🏗️ Architectural Overhaul

From Styled-Components to Vanilla Extract

One of the most significant changes in v3.0 is the complete migration from styled-components to Vanilla Extract. This migration brings substantial benefits to both performance and developer experience.

Why Vanilla Extract?
Vanilla Extract generates static CSS at build time, resulting in zero runtime overhead. Your timeline components now load faster with smaller bundle sizes, while maintaining full TypeScript support and type-safe styling.

Performance improvements:

⚡ Zero runtime CSS-in-JS overhead
📦 Smaller bundle size - no runtime style generation
🚀 Faster initial render - styles are pre-generated
💪 Type-safe styles - full TypeScript integration

Before (styled-components):

const TimelineCard = styled.div`
  background: ${props => props.theme.cardBgColor};
  border-radius: 8px;
  padding: 1rem;
`;

After (Vanilla Extract):

// timeline-card.css.ts
import { style } from '@vanilla-extract/css';
import { tokens } from '../../styles/tokens';

export const card = style({
  background: tokens.color.cardBackground,
  borderRadius: tokens.radius.medium,
  padding: tokens.space[4],
});

The migration spans 46+ CSS files across the entire codebase, with styles organized into logical groups:

src/styles/tokens/ - Design tokens and theme variables
src/styles/sprinkles/ - Utility-based styling system
src/styles/recipes/ - Component variants and patterns
Component-specific *.css.ts files co-located with components

Migration benefits for developers:

All styles are type-checked at compile time
IDE autocomplete for style properties
Impossible to introduce invalid CSS
Better refactoring support with TypeScript
Improved debugging with static class names

Unified Context Architecture

v3.0 introduces a single optimized context provider replacing multiple nested contexts, reducing re-renders and improving performance.

Old approach (multiple contexts):

<TimelineStaticContext.Provider>
  <TimelineDynamicContext.Provider>
    <TimelineComputedContext.Provider>
      {/* Component tree */}
    </TimelineComputedContext.Provider>
  </TimelineDynamicContext.Provider>
</TimelineStaticContext.Provider>

New approach (unified context):

<TimelineContextProvider {...props}>
  {/* Component tree */}
</TimelineContextProvider>

The new context architecture organizes values into three logical groups:

Static Config - Rarely changing configuration (theme, mode, layout settings)
Dynamic State - Frequently changing state (activeItemIndex, slideshow state)
Memoized Objects - Computed values (handlers, derived state)

This results in fewer re-renders and better performance across the entire component tree.

✨ New Features

🌐 Comprehensive Internationalization (i18n)

v3.0 introduces a complete internationalization system supporting 60+ configurable text elements across 11 categories, making React Chrono truly global-ready.

Full localization support
Every user-facing text in the timeline is now configurable, from navigation buttons to accessibility labels, search placeholders to keyboard help text.

Supported text categories:

Navigation controls (first, last, next, previous, play, pause)
Search functionality (placeholder, results count, no results)
Theme controls (dark mode, light mode, toggle theme)
Layout modes (vertical, horizontal, alternating)
Fullscreen (enter, exit, error messages)
Quick jump navigation
Content interactions (read more, show less, expand, collapse)
Loading and status messages
Accessibility labels (ARIA labels, screen reader text)
View density controls
Keyboard navigation help

Example - Spanish localization:

<Chrono
  items={items}
  i18n={{
    texts: {
      navigation: {
        first: 'Ir al primer elemento',
        last: 'Ir al último elemento',
        next: 'Siguiente elemento',
        previous: 'Elemento anterior',
        play: 'Iniciar presentación',
        pause: 'Pausar presentación'
      },
      search: {
        placeholder: 'Buscar en la línea de tiempo',
        ariaLabel: 'Buscar contenido de la línea de tiempo',
        clearLabel: 'Limpiar búsqueda',
        resultsCount: '{current} de {total}',
        noResults: 'No se encontraron resultados'
      },
      theme: {
        darkMode: 'Cambiar a modo oscuro',
        lightMode: 'Cambiar a modo claro'
      },
      accessibility: {
        timelineNavigation: 'Navegación de línea de tiempo',
        timelineItem: 'Elemento de línea de tiempo',
        activeItem: 'Elemento activo de línea de tiempo',
        itemPosition: 'Elemento {current} de {total}'
      }
    },
    locale: 'es',
    direction: 'ltr'
  }}
/>

Template string support:

The i18n system includes intelligent template string interpolation:

// Define template with placeholders
i18n={{
  texts: {
    search: {
      resultsCount: '{current} of {total}'
    },
    accessibility: {
      itemPosition: 'Item {current} of {total}'
    }
  }
}}

// Runtime: "3 of 15", "Item 5 of 20", etc.

Built-in utilities:

import { mergeI18nConfig, interpolateString } from '@models/TimelineI18n';

// Merge custom config with defaults
const config = mergeI18nConfig(userConfig);

// Interpolate template strings
const text = interpolateString('{current} of {total}', { current: 3, total: 15 });
// Result: "3 of 15"

🎭 Google Fonts Integration

Dynamically load and apply Google Fonts with per-element font control - set different weights, styles, and sizes for titles, card content, subtitles, and controls.

Granular typography control
Load a single Google Font family and configure different weights, styles, and sizes for each text element in your timeline.

Basic usage:

<Chrono
  items={items}
  style={{
    googleFonts: {
      fontFamily: 'Inter',
      weights: [400, 600, 700],
      display: 'swap',
      preconnect: true
    }
  }}
/>

Advanced - per-element configuration:

<Chrono
  items={items}
  style={{
    googleFonts: {
      fontFamily: 'Playfair Display',
      elements: {
        title: {
          weight: 'bold',      // 700
          style: 'normal',
          size: '1.5rem'
        },
        cardTitle: {
          weight: 'semi-bold', // 600
          style: 'italic',
          size: '1.25rem'
        },
        cardSubtitle: {
          weight: 'regular',   // 400
          style: 'normal',
          size: '1rem'
        },
        cardText: {
          weight: 300,         // light
          style: 'normal',
          size: '0.95rem'
        },
        controls: {
          weight: 'medium',    // 500
          style: 'normal'
        }
      },
      display: 'swap',
      preconnect: true
    }
  }}
/>

Font loading features:

Automatic preconnect to Google Fonts for faster loading
Configurable font-display strategy (swap, fallback, optional)
Intelligent weight deduplication (only loads required weights)
TypeScript-safe weight and style configuration
Fallback font stack for better accessibility
Support for both numeric (100-900) and named weights (thin, regular, bold, etc.)

Generated CSS variables:

The Google Fonts system automatically generates CSS variables for theming:

--timeline-font-family: "Inter", system-ui, sans-serif;
--timeline-title-font-weight: 700;
--timeline-title-font-style: normal;
--timeline-cardTitle-font-weight: 600;
--timeline-cardTitle-font-style: italic;

🖼️ Fullscreen Mode

Experience timelines in immersive fullscreen mode with cross-browser support (Chrome, Firefox, Safari, Edge).

Browser compatibility built-in
Fullscreen mode automatically handles vendor prefixes and browser-specific APIs, ensuring consistent behavior across all major browsers.

Cross-browser support includes:

Standard Fullscreen API
WebKit prefixed API (Safari)
Mozilla prefixed API (Firefox)
MS prefixed API (Edge legacy)
Automatic vendor prefix detection
Feature detection for unsupported browsers
Portal rendering to fullscreen element for overlays

Fullscreen-aware components:

Components like popover menus automatically detect fullscreen mode and portal to the correct container:

// Automatically portals to fullscreen element when active
const portalContainer = getFullscreenElement() || document.body;
ReactDOM.createPortal(content, portalContainer);

🎯 Grouped Configuration API

Organize props into 9 logical groups for better discoverability and maintainability. The old flat API is still supported for backward compatibility.

Better developer experience
Props are now organized into intuitive groups: layout, interaction, content, display, media, animation, style, accessibility, and i18n.

Old API (still works):

<Chrono
  items={items}
  borderLessCards={true}
  disableNavOnKey={false}
  timelinePointDimension={18}
  parseDetailsAsHTML={true}
  mediaHeight={400}
  slideShow={true}
  slideItemDuration={3000}
/>

New grouped API (recommended):

<Chrono
  items={items}
  display={{
    borderless: true,
    pointShape: 'circle'
  }}
  interaction={{
    keyboardNavigation: true,
    autoScroll: true
  }}
  layout={{
    pointSize: 18,
    cardWidth: 400
  }}
  content={{
    allowHTML: true
  }}
  media={{
    height: 400,
    fit: 'cover'
  }}
  animation={{
    slideshow: {
      enabled: true,
      duration: 3000,
      type: 'fade'
    }
  }}
/>

Configuration groups:

layout - Sizing and positioning
- cardWidth, cardHeight, pointSize, lineWidth
- responsive.breakpoint, positioning.cardPosition
interaction - User interactions
- keyboardNavigation, pointClick, autoScroll
- focusOnLoad, cardHover, disabled
content - Content handling
- allowHTML, readMore, textOverlay
- dateFormat, compactText, semanticTags
display - Visual appearance
- borderless, cardsDisabled, pointsDisabled
- pointShape, allCardsVisible, scrollable
- toolbar.enabled, toolbar.position, toolbar.sticky
media - Media configuration
- height, align, fit
animation - Slideshow and animations
- slideshow.enabled, slideshow.duration, slideshow.type
- slideshow.autoStart, slideshow.showProgress
style - Custom styling
- classNames, fontSizes, googleFonts
accessibility - A11y and i18n
- buttonTexts, search labels
i18n - Internationalization
- texts, locale, direction

TypeScript autocomplete:

The grouped API provides excellent IDE autocomplete and type checking:

<Chrono
  display={{
    toolbar: {
      enabled: true,
      position: 'top' | 'bottom',  // ✅ Type-safe
      sticky: true,
      search: {
        width: '200px',
        maxWidth: '400px'
      }
    }
  }}
/>

📌 Sticky Toolbar

Pin the toolbar to the top or bottom of the viewport for always-accessible controls during scrolling.

<Chrono
  items={items}
  display={{
    toolbar: {
      enabled: true,
      position: 'top',
      sticky: true,  // 🆕 Sticky positioning
      search: {
        width: '250px',
        maxWidth: '400px'
      }
    }
  }}
/>

The sticky toolbar maintains position during scroll, ensuring users always have access to:

Navigation controls (first, previous, next, last)
Slideshow controls (play, pause, stop)
Dark mode toggle
Layout switcher
Search functionality
Quick jump navigation

🔍 Enhanced Search Configuration

Fine-tune search input dimensions and positioning with granular width controls.

<Chrono
  items={items}
  display={{
    toolbar: {
      enabled: true,
      search: {
        width: '200px',        // Default search section width
        maxWidth: '400px',     // Maximum expansion width
        minWidth: '150px',     // Minimum width
        inputWidth: '180px',   // Actual input field width
        inputMaxWidth: '350px' // Maximum input expansion
      }
    }
  }}
/>

Search features:

Real-time highlighting of matches
Navigate between matches with Enter/Shift+Enter
Results counter ({current} of {total})
Clear search button
Configurable placeholder and ARIA labels (via i18n)
Case-insensitive search
Search across title, subtitle, and card content

🎪 Enhanced Dark Mode

v3.0 introduces 36 comprehensive theme properties (including 13 new dark mode-specific properties) for complete customization.

Enhanced theme system:

<Chrono
  items={items}
  theme={{
    primary: '#3b82f6',
    secondary: '#1e40af',

    // Card theming
    cardBgColor: '#1f2937',
    cardForeColor: '#f3f4f6',

    // Enhanced dark mode properties
    iconColor: '#9ca3af',
    buttonHoverBgColor: '#374151',
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    glowColor: '#3b82f6',

    // Timeline elements
    titleColor: '#f9fafb',
    titleColorActive: '#3b82f6',
    cardTitleColor: '#e5e7eb',
    cardSubtitleColor: '#9ca3af',
    cardDetailsColor: '#d1d5db',

    // Interactive elements
    focusRingColor: '#3b82f6',
    borderColor: '#374151'
  }}
  darkMode={{
    enabled: true,
    showToggle: true
  }}
  onThemeChange={(theme) => {
    console.log('Theme changed:', theme);
  }}
/>

Theme callback:

React to theme changes programmatically:

<Chrono
  items={items}
  darkMode={{ enabled: true, showToggle: true }}
  onThemeChange={(theme) => {
    // Persist preference
    localStorage.setItem('timeline-theme', JSON.stringify(theme));

    // Update app-level theme
    document.body.classList.toggle('dark-mode', theme.isDark);
  }}
/>

🐛 Bug Fixes and Improvements

v3.0 includes numerous bug fixes and quality-of-life improvements based on community feedback:

Navigation and Slideshow

✅ Fixed slideshow media deadlock causing frozen animations
✅ Resolved keyboard navigation conflicts with slideshow
✅ Improved slideshow card scrolling behavior
✅ Standardized icon dimensions across all controls
✅ Fixed slideshow not respecting pause state

Layout and Positioning

✅ Fixed popover positioning in fullscreen mode
✅ Improved responsive breakpoint behavior for vertical alternating mode
✅ Resolved nested timeline rendering issues
✅ Fixed icon positioning in alternating mode
✅ Better card remeasurement on text density changes

Styling and Theming

✅ Fixed theme color inheritance issues
✅ Improved text overlay color handling
✅ Better dark mode CSS variable support
✅ Resolved horizontal timeline point sizing
✅ Enhanced list and popover responsive styles

Performance

✅ Reduced unnecessary re-renders with optimized context
✅ Improved bundle size with Vanilla Extract migration
✅ Better lazy loading for media elements
✅ Optimized font loading with preconnect
✅ Faster initial render times

📦 Migration Guide

For Existing Users

Good news! v3.0 maintains full backward compatibility. Your existing code will continue to work without changes.

Immediate benefits (no code changes required):

⚡ Faster performance (Vanilla Extract)
📦 Smaller bundle size
🐛 Bug fixes automatically applied
🎨 Enhanced theming with new dark mode properties

Recommended: Migrate to grouped API

While the old flat API still works, we recommend migrating to the new grouped API for better maintainability:

Migration example:

// Before (v2.x)
<Chrono
  items={items}
  borderLessCards={true}
  disableNavOnKey={false}
  timelinePointDimension={18}
  parseDetailsAsHTML={true}
  mediaHeight={400}
  slideShow={true}
  slideItemDuration={3000}
  showProgressOnSlideshow={true}
  disableToolbar={false}
  toolbarPosition="top"
/>

// After (v3.0 - recommended)
<Chrono
  items={items}
  display={{
    borderless: true,
    toolbar: {
      enabled: true,
      position: 'top'
    }
  }}
  interaction={{
    keyboardNavigation: true
  }}
  layout={{
    pointSize: 18
  }}
  content={{
    allowHTML: true
  }}
  media={{
    height: 400
  }}
  animation={{
    slideshow: {
      enabled: true,
      duration: 3000,
      showProgress: true
    }
  }}
/>

Deprecated props mapping:

Old Prop (v2.x)	New Prop (v3.0)
`borderLessCards`	`display.borderless`
`disableNavOnKey`	`interaction.keyboardNavigation` (inverted)
`timelinePointDimension`	`layout.pointSize`
`parseDetailsAsHTML`	`content.allowHTML`
`mediaHeight`	`media.height`
`slideShow`	`animation.slideshow.enabled`
`slideItemDuration`	`animation.slideshow.duration`
`disableToolbar`	`display.toolbar.enabled` (inverted)
`toolbarPosition`	`display.toolbar.position`
`useReadMore`	`content.readMore`
`highlightCardsOnHover`	`interaction.cardHover`
`buttonTexts`	`accessibility.buttonTexts`

TypeScript support:

All deprecated props are still typed and will show deprecation warnings with suggestions for new props:

// TypeScript will show:
// ⚠️ 'borderLessCards' is deprecated. Use 'display.borderless' instead.

New Project Setup

Installation:

npm install react-chrono@latest
# or
pnpm add react-chrono@latest
# or
yarn add react-chrono@latest

Minimal setup:

import { Chrono } from 'react-chrono';

const items = [
  {
    title: 'January 2024',
    cardTitle: 'Project Kickoff',
    cardDetailedText: 'Started the new initiative with the team'
  },
  {
    title: 'February 2024',
    cardTitle: 'First Milestone',
    cardDetailedText: 'Completed initial design and architecture'
  }
];

function App() {
  return <Chrono items={items} mode="vertical" />;
}

Recommended setup with new features:

import { Chrono } from 'react-chrono';

const items = [...]; // Your timeline items

function App() {
  return (
    <Chrono
      items={items}
      mode="vertical"

      // Enhanced theming
      theme={{
        primary: '#3b82f6',
        cardBgColor: '#ffffff',
        cardForeColor: '#1f2937'
      }}

      // Dark mode with toggle
      darkMode={{
        enabled: false,
        showToggle: true
      }}

      // Google Fonts
      style={{
        googleFonts: {
          fontFamily: 'Inter',
          weights: [400, 600, 700],
          display: 'swap'
        }
      }}

      // Sticky toolbar with search
      display={{
        toolbar: {
          enabled: true,
          position: 'top',
          sticky: true,
          search: {
            width: '250px',
            maxWidth: '400px'
          }
        }
      }}

      // Internationalization
      i18n={{
        texts: {
          search: {
            placeholder: 'Search Timeline'
          }
        },
        locale: 'en'
      }}

      // Enhanced interactions
      interaction={{
        keyboardNavigation: true,
        autoScroll: true,
        cardHover: true
      }}
    />
  );
}

🎯 What's Next

We're committed to continuous improvement of React Chrono. Here's what's on the roadmap:

Upcoming Features

🌍 Additional pre-built i18n locale packages (French, German, Spanish, Japanese)
📱 Enhanced mobile gestures (swipe navigation)
📊 Timeline data visualization modes (Gantt-style, density view)
🎭 More animation presets for slideshow
📸 Image gallery mode with lightbox

Community

📚 Comprehensive Storybook documentation
🎓 Video tutorials and guides
🏗️ Real-world example projects
💬 Community showcase gallery

🙏 Acknowledgments

React Chrono v3.0 is the result of months of work, feedback from the community, and contributions from developers worldwide. A special thanks to:

All contributors who submitted issues, PRs, and feedback
The Vanilla Extract team for the excellent CSS-in-TypeScript framework
Everyone using React Chrono in production applications

📚 Resources

GitHub: react-chrono
NPM: react-chrono
Demo Site: Run pnpm dev for local demos

🚀 Get Started Today

Upgrade to React Chrono v3.0 and experience the next generation of timeline components:

npm install react-chrono@latest

We can't wait to see what you build with React Chrono v3.0! If you have questions, feedback, or want to showcase your timeline, join us on GitHub Discussions.

Happy timeline building! 🎉

💬 Feedback & Support

We value your feedback and want to make React Chrono better for everyone. Here's how you can get help or contribute:

📝 Bug Reports & Feature Requests

Found a bug or have an idea for a new feature?

Report issues: GitHub Issues
Feature requests: GitHub Discussions - Ideas

💡 Questions & Help

Need help using React Chrono?

Ask questions: GitHub Discussions - Q&A
Browse documentation: Props Reference
Check examples: Run pnpm dev to see live demos locally

🤝 Contributing

We welcome contributions from the community!

Code contributions: Check out open issues labeled good first issue
Documentation: Help improve our docs and examples
Testing: Add test coverage or report edge cases
Spread the word: Star the repo ⭐ and share with others

See our Contributing Guidelines for more details.

🌟 Show Your Support

If React Chrono has been helpful in your projects:

⭐ Star the repository on GitHub
🐦 Share your projects using #ReactChrono on social media
💬 Join the discussion and help others in the community
☕ Sponsor development via GitHub Sponsors

Thank you for using React Chrono! Your feedback drives our development and helps us build a better library for everyone. 🙏

🚀 React Chrono: Supercharge Your Timelines with Powerful New Features!

Prabhu Murthy — Sun, 08 Jun 2025 13:54:25 +0000

Hey developers! 👋

Get ready to take your timeline experiences to the next level! We're thrilled to announce the latest release of React Chrono, packed with a host of exciting new features, performance enhancements, and developer experience improvements. If you're building interactive, engaging timelines in your React applications, you're going to love these updates.

React Chrono has always aimed to make beautiful, responsive timelines easy to create. With the new release, we've listened to your feedback and pushed the boundaries further. Let's dive into what's new!

🔍 Enhanced Search Functionality: Find Events in a Flash

Navigating through extensive timelines is now smoother and more intuitive than ever. Our revamped search functionality is designed for speed and usability.

✨ Key Features:

🚀 Smart & Performant: Search queries are debounced, ensuring a fluid experience without performance hiccups
🔤 Case-Insensitive Matching: Finds what users are looking for, regardless of casing
⌨️ Keyboard Navigation: Easy cycling through search results using keyboard shortcuts
💾 Persistent Search State: Search query remains active during navigation

💻 Implementation Example

import { Chrono } from 'react-chrono';
import myTimelineItems from './items'; // Your timeline items

const App = () => (
  <div style={{ width: "100%", height: "95vh" }}>
    <Chrono
      items={myTimelineItems}
      mode="VERTICAL_ALTERNATING"
      // 🎯 Search is built into the toolbar by default!
      // No special props needed - just start typing in the search box
    />
  </div>
);

export default App;

📋 Search Features:

🔍 Built-in search box in the timeline toolbar
⚡ 150ms debounce (with 500ms maxWait) for smooth performance
🔤 Case-insensitive search across titles and content
⌨️ Keyboard navigation: Enter to go to next result, Escape to clear search
🎯 Automatic highlighting of matching timeline items

This makes your timelines more accessible and user-friendly, especially for data-rich scenarios.

🌙 Comprehensive Dark Mode Support: Style It Your Way

Dark mode is no longer just a trend; it's a user expectation. React Chrono's new release introduces a vastly improved dark mode experience with deep customization.

🎨 Enhanced Dark Mode Features:

🎛️ 15+ Configurable Properties: Tailor every aspect of the dark theme
🔄 Automatic System Preference Detection: Seamlessly adapts to user's OS-level color scheme
✨ Smooth Transitions: Elegant animated transitions when switching themes

🎨 Custom Dark Theme Example

import { Chrono, Theme } from 'react-chrono';
import myTimelineItems from './items';

const customDarkTheme: Theme = {
  primary: '#00bfff',          // 🔵 Vibrant blue for accents
  secondary: '#888888',        // 🔘 Lighter grey for secondary elements
  cardBgColor: '#2c2c2c',      // 🌚 Darker card background
  cardForeColor: '#f5f5f5',    // 💡 Light text on cards
  titleColor: '#00bfff',       // 📝 Title color matching primary
  titleColorActive: '#ffffff', // ⭐ Active title color
  iconColor: '#00bfff',        // 🎯 Icon accent color
  // ... and many more properties to explore!
};

const App = () => (
  <div style={{ width: "100%", height: "95vh" }}>
    <Chrono
      items={myTimelineItems}
      mode="VERTICAL_ALTERNATING"
      theme={customDarkTheme}     // 🎨 Apply your custom theme
      enableDarkToggle={true}     // 🌙 Enable dark mode toggle button
    />
  </div>
);

export default App;

🖱️ Improved User Experience: Intuitive Interactions

React Chrono's new release introduces several UX enhancements to make timeline interaction more intuitive and accessible:

🚀 UX Enhancement Features:

⌨️ Enhanced Keyboard Navigation: Navigate through timeline items using arrow keys for better accessibility
🎯 Smooth Scrolling: Refined scrolling behavior with improved inertia and snap points
📱 Responsive Controls: Timeline controls automatically adapt to different screen sizes and orientations
💡 Tooltips & Visual Cues: Helpful tooltips and visual indicators to guide users through interactions

🎮 Customized Controls Example

import { Chrono } from 'react-chrono';
import myTimelineItems from './items';

const App = () => (
  <div style={{ width: "100%", height: "95vh" }}>
    <Chrono
      items={myTimelineItems}
      mode="VERTICAL_ALTERNATING"
      enableQuickJump={true}        // 🎯 Enable outline for easier navigation
      disableNavOnKey={false}       // ⌨️ Enable keyboard navigation  
      allowDynamicUpdate={true}     // 🔄 Allow dynamic updates to timeline
      highlightCardsOnHover={true}  // ✨ Highlight cards on mouse hover
    />
  </div>
);

export default App;

These improvements make React Chrono timelines more accessible and user-friendly, resulting in a smoother experience across devices.

✨ Advanced Animation System: Bring Your Timelines to Life

Engage your users with smoother, more dynamic timeline presentations.

🎭 Animation Features:

🎨 Built-in Animation Types: Choose from reveal, slide_in, and slide_from_sides animations
🎯 Mode-Specific Defaults: Animations are automatically optimized for different timeline modes:
- 📱 VERTICAL: Uses reveal animation with subtle scale and opacity transitions
- 🔄 VERTICAL_ALTERNATING: Uses slide_from_sides with directional sliding effects
- ➡️ HORIZONTAL: Uses slide_in animation with smooth top-to-bottom transitions
⏱️ Slideshow Integration: Smooth 0.5s animation duration with ease-in-out timing

🎬 Slideshow Configuration Example

import { Chrono } from 'react-chrono';
import myTimelineItems from './items';

const App = () => (
  <div style={{ width: "100%", height: "95vh" }}>
    <Chrono
      items={myTimelineItems}
      mode="VERTICAL_ALTERNATING"
      slideShow={true}                    // 🎥 Enable slideshow mode
      slideItemDuration={3000}            // ⏰ 3 seconds per slide
      slideShowType="slide_from_sides"    // 🎯 Optional: override default animation
    />
  </div>
);

export default App;

📋 Animation Types Available:

🎭 reveal: Scale and fade-in effect (default for VERTICAL mode)
↗️ slide_in: Slide from top (default for HORIZONTAL mode)
↔️ slide_from_sides: Directional sliding (default for VERTICAL_ALTERNATING mode)

🔗 Nested Timeline Support: For Complex Narratives

Sometimes, a single layer isn't enough. React Chrono's new release introduces the ability to nest timelines within timeline cards, perfect for:

📋 Use Cases:

📊 Detailed project breakdowns (phases containing tasks)
📚 In-depth historical accounts (eras containing specific events)
📖 Multi-layered storytelling

🌳 Nested Timeline Structure Example

// In your items.ts or similar
const parentItems = [
  {
    title: "Q1 2025: Project Alpha Launch",
    cardDetailedText: "Overview of the Project Alpha initiative and its successful launch.",
    // 🎯 Define nested timeline items using the 'items' property
    items: [
      { 
        title: "Jan: Kick-off", 
        cardDetailedText: "Initial planning and team assembly." 
      },
      { 
        title: "Feb: Development Sprint 1", 
        cardDetailedText: "Core features developed." 
      },
      { 
        title: "Mar: UAT & Launch", 
        cardDetailedText: "User testing and go-live." 
      }
    ]
  },
  // ... more parent items
];

// In your App.tsx
import { Chrono } from 'react-chrono';

const App = () => (
  <div style={{ width: "100%", height: "95vh" }}>
    <Chrono
      items={parentItems}
      mode="VERTICAL_ALTERNATING"
      nestedCardHeight={120} // 📏 Optional: control height of nested timeline cards
    />
  </div>
);

export default App;

🚀 This powerful feature opens up new possibilities for presenting complex, hierarchical information. The nested timelines are automatically detected when timeline items contain an items array property.

🖼️ Improved Media Handling: Better Alignment and Display

Displaying images and videos in your timelines now offers more control over layout and presentation.

🎨 Media Enhancement Features:

📐 Media Alignment: Control how media content is positioned within timeline cards
🖼️ Media Fit: Configure how media content should fit within its container (similar to CSS object-fit)

📸 Media Configuration Example

import { Chrono } from 'react-chrono';
import itemsWithMedia from './itemsWithMedia'; // Your items with media objects

const App = () => (
  <div style={{ width: "100%", height: "95vh" }}>
    <Chrono
      items={itemsWithMedia}
      mode="VERTICAL"
      mediaSettings={{
        align: 'center',  // 📍 'left', 'right', or 'center'
        fit: 'cover'      // 🖼️ 'cover', 'contain', 'fill', or 'none'
      }}
    />
  </div>
);

export default App;

📋 Available Options:

Alignment: left | right | center
Fit: cover | contain | fill | none

⚡️ Significant Performance Optimizations: Smooth Sailing for Large Datasets

We've dived deep under the hood to make React Chrono faster and more memory-efficient, especially when dealing with a large number of timeline items.

🚀 Performance Enhancements:

🎯 Outline Virtualization: Timeline outline items are virtualized to improve performance with many timeline points
🔧 Memory Leak Fixes: More robust cleanup of event listeners and internal states
🔄 Optimized Re-renders: Reduced unnecessary component updates
📦 Smaller Bundle Size: Continued efforts to keep the library lean

📊 Large Dataset Optimization Example

import { Chrono } from 'react-chrono';
import veryLargeDataset from './veryLargeDataset'; // 1000+ items

const App = () => (
  <div style={{ width: "100%", height: "95vh" }}>
    <Chrono
      items={veryLargeDataset}
      mode="VERTICAL"
      scrollable={{ scrollbar: true }} // 📜 Enable scrolling for long content
      enableQuickJump={true}           // 🎯 Enable quick navigation for large datasets
    />
  </div>
);

export default App;

🎯 Users with extensive timelines will notice a significant improvement in responsiveness and load times, particularly in the timeline outline navigation.

🛠️ Developer Experience Enhancements: Build Better, Faster

We care about your productivity and the robustness of your applications.

👨‍💻 Developer Experience Features:

📝 Enhanced TypeScript Support: More comprehensive and accurate type definitions for props, theme objects, item models, and internal structures
🔍 Better Autocompletion: Improved IDE integration with better type checking and fewer runtime errors
🚨 Improved Error Handling: More descriptive error messages and graceful degradation when issues occur

💻 TypeScript Integration Example

import { Chrono, TimelineItemModel, TimelineMode, Theme } from 'react-chrono';

// 🎯 Fully typed timeline items
const typedItems: TimelineItemModel[] = [
  {
    title: "Event 1",
    cardTitle: "My Card Title",
    cardSubtitle: "A subtitle",
    cardDetailedText: "Detailed information here...",
    media: {
      type: "IMAGE",
      source: { url: "https://via.placeholder.com/300" }
    }
    // 🔍 TypeScript will help ensure 'type' is a valid media type, etc.
  },
  // ... more items
];

const App: React.FC = () => {
  // 📝 Typed callback functions
  const handleItemSelected = (item: {
    title?: string;
    cardTitle?: string;
    cardSubtitle?: string;
    cardDetailedText?: string | string[];
    index: number;
  }) => {
    console.log("Selected item:", item);
  };

  return (
    <div style={{ width: "100%", height: "95vh" }}>
      <Chrono
        items={typedItems}
        mode={"VERTICAL_ALTERNATING" as TimelineMode}
        onItemSelected={handleItemSelected} // 🎯 Fully typed event handlers
        enableDarkToggle={true}
        parseDetailsAsHTML={true}
      />
    </div>
  );
};

export default App;

📋 TypeScript Benefits:

🔍 Better autocompletion in your IDE
🚨 Compile-time error detection
📝 Comprehensive prop validation
🎯 Type-safe event handlers

🚀 Migrating to the Latest Release

Upgrading is straightforward! React Chrono's new release maintains backward compatibility for most existing APIs.

📦 Installation Steps

Update your dependency:

   npm install react-chrono@latest
   # or
   yarn add react-chrono@latest
   # or
   pnpm update react-chrono@latest

🎯 Enable New Features: Most new features are opt-in via new props (as shown in the examples above). Your existing timelines should continue to work as before.
📖 Review Documentation: Check the updated documentation for any specific migration notes if you were using highly customized internal aspects.

⚠️ Migration Notes

✅ Backward Compatible: Existing code should work without changes
🆕 New Props: All new features are opt-in via new props
📝 TypeScript: Enhanced type definitions may require minor type adjustments

🏁 Get Started with React Chrono Today!

React Chrono's latest release is more than just an update; it's a significant step forward in making timeline creation a joy for developers and a delight for users. With enhanced search, deep dark mode customization, intuitive user interactions, nested timelines, new animations, and massive performance gains, there's never been a better time to use React Chrono.

We're incredibly excited to see what you build with these new capabilities! 🎉

🔗 Resources & Links

📚 Documentation & Examples:

🏠 GitHub Repository: https://github.com/prabhuignoto/react-chrono
📖 Official Documentation: https://react-chrono.prabhumurthy.com/
📦 NPM Package: https://www.npmjs.com/package/react-chrono

💬 Community & Support

Have feedback or built something cool? Share it with the community or open an issue on GitHub!

Happy Timeline Building! 🚀✨

📝 Summary of New Features

✅ Enhanced Search - Find timeline events instantly with intelligent search

🌙 Dark Mode - Comprehensive theming with 15+ customizable properties

🖱️ Better UX - Improved interactions, keyboard navigation, and accessibility

✨ Animations - Three built-in animation types with mode-specific defaults

🔗 Nested Timelines - Support for complex, hierarchical timeline structures

🖼️ Media Controls - Better alignment and display options for images/videos

⚡ Performance - Optimized rendering and virtualization for large datasets

🛠️ Developer Experience - Enhanced TypeScript support and error handling

💡 Note: All prop names and configurations in examples are verified against the actual React Chrono source code. Always refer to the official documentation for the most up-to-date information.

Announcing React-Chrono 2.0: Exciting New Features and Improvements

Prabhu Murthy — Fri, 24 Mar 2023 13:10:13 +0000

I'm thrilled to share with you all the launch of 🚀React-Chrono v2.0, which marks the most significant update since its initial release. React-Chrono is a versatile and adaptable timeline toolkit designed for React, enabling you to showcase events, stories, journeys, and other related content with ease.

In the latest release, there are several new enhancements and improvements that improve the usability and customization of the library. Let's explore the details.

✨ Revamped Timeline Cards

The timeline cards in React-Chrono 2.0 have undergone a complete overhaul based on user feedback and evolving design trends. The new timeline cards have been redesigned to improve readability and visual appeal, with enhancements to typography, spacing, and overall layout.

We have also added new features to the timeline cards, such as the ability to expand or minimize text with a single click. The new textOverlay mode enhances the look and feel of the cards by overlaying text on images or videos, making it easier to read and more visually appealing.

🌒Dark Mode

Dark mode has become increasingly popular, particularly in low-light environments. React-Chrono now includes this feature, allowing users to easily switch between light and dark modes depending on their preference.

🎨Theme Improvements

Users now have greater control over the look and feel of their timelines. With new theming options, such as custom background colors and fonts, and improved existing options, it's easier than ever to achieve the desired consistency and aesthetic.

The new theming options also make it easier to create a consistent design across multiple timelines, making it an ideal choice for designers or developers working on complex projects.

⚡New Text Overlay Mode

The new textOverlay mode is a game-changer for displaying media-rich timelines. With this new feature, users can overlay text on images or videos, making it easier to read and more visually appealing.

New options have been added to expand or minimize text, which enables users to read longer descriptions with ease or hide them when they are not necessary.

📺Improved Slideshow Function

The new version includes significant enhancements to the slideshow functionality. The progress bar has been further refined and improved to ensure greater accuracy and visual appeal, and additional slideshow types have been introduced to meet diverse needs.

The new slideshow types include autoplay, loop, and manual, making it easier to customize the slideshow experience to the user's preference.

🌿Nested Timelines

The most significant addition to library is the nested timelines feature. This new feature allows users to create nested timelines within the timeline cards, making it easier to display complex stories or journeys.

The nested timelines feature is fully data-driven, meaning that if a timeline item has an items collection or array inside, it will be automatically rendered as a nested timeline inside the timeline cards. This makes it easier to create complex timelines without having to manually code them. Checkout the getting started guide on how to build a basic timeline

Customize Timeline Points

One of the newest features is the ability to customize the shapes of timeline points. The timeline points are the circles that appear on the timeline to represent individual events or milestones.

By default, all timeline points in React-Chrono are circular. However, with the new timelinePointShape prop, you can now choose from three different shapes: circle (default), diamond, and square. This feature provides greater flexibility for creating timelines with unique styles and visualizations.

⚙️Improvements

React-Chrono v2.0 represents a significant step forward in improving the user experience and accessibility for developers. To achieve this goal, i have rewritten and refactored certain aspects of the library to make it easier for contributors to get involved in the project and ensure better overall code quality.

Additionally, i've made significant improvements to our documentation site, including the addition of new examples and tutorials. These changes are aimed at helping developers get started with React-Chrono more easily and customize it to their specific needs.

Conclusion

React-Chrono v2.0 is a significant upgrade to the timeline library, offering several new features and improvements. With the redesigned timeline cards, new dark mode, improved theming, and new textOverlay mode, the library now offers a more user-friendly and customizable experience.

The addition of nested timelines makes it even more powerful and data-driven, making it an ideal choice for displaying complex stories or journeys. I hope you enjoy using React-Chrono 2.0 and look forward to your feedback.

⭐ Github: https://github.com/prabhuignoto/react-chrono/
🔧 Kitchen Sink: https://react-chrono-kitchen-sink.prabhumurthy.com

Thanks for reading! If you want to see more of my work, be sure to follow me on GitHub and Twitter.

Introducing react-visual-grid, a smart image grid component for React

Prabhu Murthy — Mon, 05 Dec 2022 07:43:42 +0000

Introduction

If you’ve ever used Pinterest, you know just how useful image grids can be. Image grids let you showcase and present products, dishes, architecture, or anything else you can think of in an organized way that’s easy to follow and understand. In this post, we’ll walk through the steps of building your own image grid with the react-visual-grid package.

🖼️ What is react-visual-grid?

react-visual-grid is a library that allows developers to easily create image grids with React. It provides an intuitive and customizable interface for organizing images into 2 unique grid layouts. With its versatile API, developers can create grids with different image sizes, and configurations.

Here are the main highlights of the library:

🪟 Generate grids easily.
➡️ Render images horizontally or vertically in a grid.
⚡ Load thousands of images without worrying about performance.
🎛️ UI controls for adjusting image sizes.
💡 Resizable Grid
📦 Lightweight (7kb gzipped)
💪 Built with typescript.
💡 Intuitive API

💡Why use react-visual-grid?

react-visual-grid is built with performance in mind, allowing it to render large datasets quickly without slowing down your app.

This makes it perfect for applications that require displaying a lot of images at once.

The library provides an easy and smart solution for building image grids quickly and efficiently. With its performance benefits and styling options, developers can create grids that are both visually pleasing and highly performant.

🚀 Getting started with react-visual-grid

To install react-visual-grid, simply run the following command:

npm install --save react-visual-grid

or if you are using Yarn

yarn add react-visual-grid

Once installed, you can start building grids in your project. To do this, simply import the Grid component from react-visual-grid in the desired component where you'd like the grid to be rendered:

import { Grid } from react-visual-grid;

You're now ready to start building grids with react-visual-grid. Read on to learn more about how to configure and customize your grids.

🔨 Building the Grid

The vertical layout displays images from top to bottom, while the horizontal layout displays images from left to right.

The library will automatically figure out the images that can be displayed depending on the width and height of the container and size of the image, so you won't have to worry about manually specifying how many images should be in each row or column. This makes it easier to create an image grid that looks great on all devices, regardless of their size and resolution.

Here's an example of code that you can use to create an image grid with 20 images. The images will be loaded from the Lorem Picsum service, and the code uses the vertical layout (default) to arrange the images from top to bottom.

import { Grid } from "react-visual-grid";

// generate random images using lorem picsum service
const images = Array.from({ length: 20 }, (_, i) => ({
  src: `https://picsum.photos/id/${Math.round(Math.random() * 110)}/800/600`,
  alt: `Image ${i + 1}`,
}));

const App = () => {
  return <Grid images={images} width={900} height={1200} />;
};

Now that we have seen how to create a simple grid, let's see how to create an image grid with a horizontal layout.

import { Grid } from "react-visual-grid";

const App = () => {
  return (
    <Grid images={images} gridLayout="horizontal" width={1800} height={1200} />
  );
};

🔍 Zoom levels & Image sizes

There are three zoom levels that can be adjusted in react-visual-grid.

By adjusting the zoom levels, you can create a unique look for your image grid. Whether you want your images to take up more space or be smaller and more subtle, react-visual-grid makes it easy to find the perfect balance.

No matter what type of image grid you’re creating, being able to customize the zoom levels is an essential part of the process.

import { Grid } from "react-visual-grid";

const imageSizes= {
  "1X": {
    width: 120,
    height: 100,
  },
  "2X": {
    width: 200,
    height: 180,
  },
  "3X": {
    width: 320,
    height: 280,
  },
};

const App = () => {
  return (
    <Grid images={images} gridLayout="horizontal" width={1800} height={1200} imageSizes={imageSizes} />
  );
};

✨ Resizable & Fullscreen

The resizable grid feature is especially useful, as it will automatically adjust the number of images depending on the size of the grid. This ensures that your image grid looks great regardless of the size or shape of the container.

Fullscreen capabilities are also available, allowing you to show more images on the grid. With fullscreen, your users will be able to easily view all the images without having to scroll through pages. Plus, they can also zoom in and out of the images, making it easier to see them in detail.

⚡Performance & Virtualization

When it comes to loading hundreds of images onto a web page, performance can quickly become an issue. Browsers have limited resources, and if the page contains too many images, it will take a long time to render them all.

One way to help improve performance is by using virtualization. This is a technique that only renders the visible images and puts the rest in an offscreen state. This reduces the strain on the browser, allowing it to render more quickly and efficiently.

react-visual-grid has an in-built virtualization feature which makes building image grids easier and faster than ever before. This feature works by only rendering the images that are visible on the screen, leaving the rest in an offscreen state until they are needed.

🎨 Theme

One of the best features of react-visual-grid is its flexibility in customizing the component theme. With just a few simple tweaks, you can completely change the look and feel of your image grid. This allows you to give your grid a consistent, professional appearance that matches your website’s overall design.

<Grid
  gridLayout="vertical"
  theme={{
    backgroundColor: "#000",
    controlBgColor: "#303030",
    controlBtnColor: "#595959",
    controlsBackDropColor: "rgba(0, 0, 0, 0.95)",
    thumbnailBgColor: "#202020",
  }}
/>

Conclusion

react-visual-grid is an incredibly powerful tool for building robust and visually appealing image grids. It provides a simple, lightweight solution for creating a wide range of different grid layouts.

I really hope you enjoyed this post. Please feel free to open an issue in the Github repository or reach out to me, if you have any special queries about its usage or you have any suggestions.

Building a draggable menu with react-float-menu

Prabhu Murthy — Mon, 05 Sep 2022 13:15:43 +0000

Menus are a crucial user interface (UI) control that have long
been a staple of desktop and web applications.

Menus have typically been static, and they bring a lot of efficiency to accessing contextual information. But should the menus always be static? why cant Menu's have some fun.

What if the menu was draggable and the user had complete control over its placement on the screen?

But why do we need a draggable menu? I started this project
because I wanted to build a menu that is easy to move around and
lets users focus on what's important.

For instance, you might want to maximize the screen area when working on a painting or drawing application. We can put all the painting tools in this menu and easily pull them out when we need them.

In this article, we'll take a closer look at one such smart draggable menu library for React with a user-friendly API that can do exactly that.

We'll learn about react-float-menu, understand its API, and see it in action.

As its name suggests, you can easily drag the menu and place it
wherever you like on the screen. The library is capable of more than just dragging, as we'll see in a second.

Before we start using the library, let's go through and learn about some of its most important features.

⭐ Starting position & Pinning

The menu's starting point can be easily set to one of four predefined positions (top left, top right, bottom left, bottom right). You can also pin the menu. Pinning turns off the ability to drag, which could be useful in apps where you want to keep the menu in the same position.

⭐ Custom shape and icon for the Menu head

A menu head is the main part of react-float-menu that can be moved, and you can choose whether you want it to be square or round. The menu head shows a default icon, which can also be changed.

⭐ Auto flip

There are times when it's convenient to have the menu automatically flip for you, especially if it's on a screen edge where there isn't much room to show the menu downwards. This is especially the case when the menu is placed at the bottom of the screen.

⭐ Auto positioning

When the menu head is placed on the horizontal edges, the menu may also become hidden. The library offers the choice to automatically move and bring it to our focus.

⭐ Sub menu

Sub-menus work right out of the box. No extra property is needed. All we have to do to create a submenu is add a nested collection to an existing menu item.

⭐ Theme

The library allows for very precise themeing, and you are completely free to change the colors of the different elements of the menu.

Getting started

Let's get started by installing the library.

npm install react-float-menu or yarn add react-float-menu

The article assumes that you already have everything set up and ready to go for development. If you don't know how to start, use create-react-app or vite to get the react project off the ground.

Building the menu

react-float-menu is a data driven library. This means you need to pass a collection of menu items to build the menu. Let's see how to do that.

<Menu
  items={[
    { name: "File" },
    { name: "Edit" },
    { name: "Add" }
  ]}
></Menu>

Now that we've set up the basics, let's check out some of the other features. First, let's look at how to change the shape of the menu head and the main icon.

<Menu
  items={[
    { name: "File" },
    { name: "Edit" },
    { name: "Add" }
  ]}
  shape="square"
>
  <span>💟</span>
</Menu>

We changed the shape of the menu head and changed the default icon with this new code. Now it's time to add some of the cool things we talked about before.

Pinning & Start Position

<Menu
  items={[
    { name: "File" },
    { name: "Edit" },
    { name: "Add" },
  ]}
  startPosition="top left"
  pin
>
  <span>💟</span>
</Menu>

By setting the pin prop, we have made the menu non draggable and, by using the startPosition prop, we have placed it on the top left corner of the screen.

Auto flip & Positioning

<Menu
  items={[
    { name: "File" },
    { name: "Edit"  },
    { name: "Add" }
  ]}
  startPosition="top left"
  pin
  autoFlipMenu
  bringMenuToFocus
>
  <span>💟</span>
</Menu>

The autoFlipMenu automagically flips the menu vertically and brings it to the visible area of the browser. Similarly, bringMenuToFocus moves the menu horizontally and brings it to the visible area of the browser.

Themeing

With the theme prop, you can completely change the look and feel of the menu.

<Menu
  items={[
    { name: "File" },
    { name: "Edit"  },
    { name: "Add" }
  ]}
  shape="square"
  startPosition="top left"
  pin
  autoFlipMenu
  bringMenuToFocus
  theme={{
    menuBackgroundColor: "#FFFFFF",
    menuItemHoverColor: "#318CE7",
    menuItemHoverTextColor: "#fff",
    primary: "#318CE7",
    secondary: "#FFFFFF",
  }}
>
  <PlusIcon />
</Menu>;

Before we wrap up, let's take a look at one more cool feature. What if we also want the menu items to have icons? It is as simple as adding an icon property to the items collection.

<Menu
  items={[
    { name: "File", icon: <span>📁</span> },
    {
      name: "Edit", icon: <span>📝</span>,
      children: [{name: "Cut", icon: <span>✂️</span>}]
    },
    { name: "Add", icon: <span>➕</span> },
  ]}
  shape="square"
  startPosition="top left"
  pin
  autoFlipMenu
  bringMenuToFocus
  theme={{
    menuBackgroundColor: "#FFFFFF",
    menuItemHoverColor: "#318CE7",
    menuItemHoverTextColor: "#fff",
    primary: "#318CE7",
    secondary: "#FFFFFF",
  }}
>
</Menu>;

Notice how we have added a submenu to the Edit menu item. To add a submenu, all we need to do is pass an array of menu items to the children property.

items={[
    { name: "File", icon: <span>📁</span> },
    {
      name: "Edit", icon: <span>📝</span>,
      items: [{name: "Cut", icon: <span>✂️</span>}]
    },
    { name: "Add", icon: <span>➕</span> },
  ]}

After completing all the steps, the menu should look as follows.

You can check out the menu for yourself in this codesandbox.

The library's first release came out a few weeks back, and more important updates are on the way. Soon, things like improved accessibility and rendering custom content will be made available.

Github Project Page

If you liked this project, you might also like some of my other open source work.

Build smart wizards with react-wizardry

Prabhu Murthy — Wed, 15 Jun 2022 16:56:28 +0000

Introduction

Wizards are an excellent way to collect information from users in a sequential manner.

In this post, we'll look at how to build a multi-step wizard using the react-wizardry library.

react-wizardry is a brand new react library built with Typescript for building multi step forms with in built validations.

Let’s get started by installing the library first.

npm install react-wizardry

⚡Setting up the pages

Pages are central to building multi step forms with react-wizardry.

Each Page object represents a page in the wizard. Every Page object has a fields array that configures the input fields.

Lets use the pages prop to build the wizard

<Wizard
  pages={[
    {
      title: "Page 1",
      fields: [
        {
          label: "First Name",
          name: "firstName",
          type: "text",
        },
        {
          label: "Last Name",
          name: "lastName",
          type: "text"
        },
      ]
    },
    {
      title: "Page 2",
      fields: [
        {
          label: "Date of Birth",
          name: "dob",
          type: "date"
        },
      ]
    },
    {
      title: "Page 3",
      fields: [
        {
          name: "salary",
          label: "Salary",
          type: "number"
        },
      ]
    },
  ]}
/>

The wizard has been configured with three pages.

On page 1, there are two fields: first name and last name.

Date of Birth is the only field on Page 2, and Salary is the only field on the final page.

It's crucial to keep in mind that the pages are rendered in the order specified in the pages array.

Let's see how the UI looks so far.

🔠 Field Types

The type property allows you to define the type of input field.

11 different input types are supported by react-wizardy.

text, email, phone, number, password, textarea, select, checkbox, datetime, radio, and file are the supported input types.

⚠️ Marking a field as mandatory

When building multi-step forms, it is important to collect some mandatory information before proceeding to the next step. In react-wizardry, this can be achieved via the isRequired property.

To make a field mandatory, all we need to do is set isRequired to true for the field that you want the user to enter without fail.

Let's make the firstName field mandatory in our pages collection.

fields: [
  {
    label: "First Name",
    name: "firstName",
    type: "text"
    isRequired: true,
  },
  {
    label: "Last Name",
    name: "lastName",
    type: "text"
  }
]

Mandatory fields are marked with a special red asterisk icon and the next button will be disabled. The next button will become enabled only when the value for the field is filled by the user.

✅ Field validations

All supported input fields in react-wizardry already have in built validation. When a field is marked as isRequired, validations are turned on by default. The component shows a nice error message right next to the field, and the messages go away when the user fixes the problem.

🎨 Themes

The library has granular support for changing the colors of the different elements. Checkout the documentation for complete details.

Here is an example of the wizard with the dark theme

Conclusion

Apart from the concepts we looked at, react-wizardry offers features such as RTL, custom validation messages, and customizable stepper icons out of the box.

Check out the documentation for more details and explore all the codesandbox samples here.

⭐ Star this project on Github

If you liked this post, you might also like my other open source projects.

Follow me on Twitter, Github.

Introducing react-creme, a new light weight UI component library for React

Prabhu Murthy — Wed, 23 Feb 2022 14:00:02 +0000

✨ What is react-creme

react-creme is a brand new UI toolkit (aka component library) for React.

With 40+ High quality UI components, react-creme comes with an exhaustive list of ready to use performant UI Elements for building apps of any shape and size.

Weighing just ~43kb (minzipped size), react-creme is light and we intend to keep it that way. The library has a very minimal dependency at the moment and the plan is to whittle down on external dependencies and make the lib completely independent in the future.

❓Why

The goal was to build a lighter UI component library but at the same time provide a toolkit that is powerful, easy to setup and configure.

The library exposes an intuitive API that is easier to understand and consistent across the components.

💪 Typescript

The library has been written completely in typescript and the components have been strongly typed in a manner that is consistent with the standards.

♿ Accessibility

react-creme takes accessibility seriously. All of the UI elements are accessibility complaint and the keyboard based navigation has been implemented to work seamlessly across all browsers.

🎨 Themes

react-creme comes with an inbuilt ThemeProvider that makes the whole themefication process easy and hassle free.

The colors, font sizes, icon sizes can be customized quickly with ease.

⚡Performance

Components are light, robust and elements like List comes with the virtualization feature out of the box. Virtualization is currently supported on elements such as List and Dropdown, but this will be soon introduced to components that deal with larger datasets.

Installation

react-creme is available for use from npm and you can install it via npm or yarn

yarn add react-creme

npm install react-creme

Getting started

import { Button } from 'react-creme';
import 'react-creme/dist/react-creme.css';

const App = () => {
  return <Button label="Save" onClick={()=>alert("Saved")} />
};

export default App

If all goes well you should have the button rendered and on clicking should alert you with the "Saved" message.

How about a slider component ?

import { Slider} from 'react-creme';
import 'react-creme/dist/react-creme.css';

const App = () => {
  return <Slider end={13} knobShape="square" knobSize={15} position="top" start={4} />
};

export default App

You can checkout all the cool stuff you can have on a slider here

✨ Explore All the Components

⚡What's coming next

🌒 - Support for Dark mode has been under the works and will be released as part of the beta release.

🌈 - More components

🛣️ Roadmap

react-creme has been under development for the past few months and its currently in alpha stage. I expect the lib to move into beta stage in the coming weeks.

Please feel free to add your comments / feedback. What you like, what you didn't like, what can be improved.

If you liked this post, you might also like some of the other stuff i built on Github

Follow me on Twitter

⭐Star this project on Github

📃react-creme doc site

React-Chrono crosses 2000 🌟 on Github, ver 1.7 released with support for rendering custom content

Prabhu Murthy — Tue, 10 Nov 2020 06:11:16 +0000

What is react-chrono

react-chrono is a modern Timeline component built for react. It comes with 3 different layouts and is highly customizable.

Please follow the below post for a detailed getting started guide.

Introducing react-chrono - A flexible Timeline component for React

Prabhu Murthy ・ Sep 18 '20

#react #typescript #opensource #webdev

Whats new

Custom rendering: The component now supports rendering custom content in the Timeline cards.
Accessiblity: With 1.7 both the general accessiblity and the keyboard accessibility of the component has been greatly improved.
Ability to flip the layout(RTL). A new prop added to flip the layout on both VERTICAL and VERTICAL_ALTERNATING modes.
New scrollable option to allow free scrolling on VERTICAL and VERTICAL_ALTERNATING modes.
New option to position the card in HORIZONTAL mode.
The latest version also includes bug fixes and various UX improvements.

Custom rendering

To insert custom content, just pass the blocked elements between the Chrono tags.

Each div element is automatically converted into a timeline item and inserted into the timeline card. The items collection is completely optional and custom rendering is supported on all 3 modes.

  <Chrono
    mode="VERTICAL_ALTERNATING"
    scrollable
  >
    <div>
      <div style={{width: "250px", height: "250px"}}>
        <img style={{maxWidth:  "100%", maxHeight:  "100%"}}  src="https://cdn.tutsplus.com/net/uploads/2013/08/github-collab-retina-preview.gif"/>
      </div>
    </div>
    <div>
      <h3>This is a List</h3>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </div>
    <div>
      <h3>Dunkirk</h3>
      <p>
        The Battle of Dunkirk (French: Bataille de Dunkerque) was fought in Dunkirk (Dunkerque), France, during the Second World War, between the Allies and Nazi Germany.
      </p>
    </div>
    <div style={{margin: "1rem"}}>
      <h3>Table</h3>
      <table>
        <thead>
          <tr>
            <td>Column  1</td>
            <td>Column  2</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Value 1</td>
            <td>Value 2</td>
          </tr>
          <tr>
            <td>Value 5</td>
            <td>Value 6</td>
          </tr>
        </tbody>
      </table>
    </div>
  </Chrono>

The items collection will also work nicely with any custom content that is passed. The following snippet sets the the title and cardTitle for the custom contents.

  const items = [
    {title: "Timeline title 1", cardTitle:  "Card Title 1"},
    {title: "Timeline title 2", cardTitle:  "Card Title 2"}
  ];

  <Chrono mode="VERTICAL" items={items}>
    <div>
      <p>Lorem Ipsum. Lorem Ipsum. Lorem Ipsum</p>
    </div>
    <div>
      <img src="<url to  a nice image" />
    </div>
  </Chrono>

Flip layout

A new prop added to flip the layout in VERTICAL and VERTICAL_ALTERNATING modes. This will be useful for react apps that use RTL(right to left) rendering.

  <Chrono
    items={items}
    mode="VERTICAL"
    flipLayout
  />

Scrollable

The scrollable enables free scrolling on VERTICAL and VERTICAL_ALTERNATING modes.The scrollbars are hidden by default. To enable scrollbars set scrollbar:true.

  <Chrono
    items={items}
    mode="VERTICAL"
    scrollable={{scrollbar:  true}}
  />

Card positioning in Horizontal Mode

Now the cards can be positioned to either TOP or BOTTOM.

  <Chrono
    items={items}
    mode="HORIZONTAL"
    cardPositionHorizontal="TOP"
  />

📦 CodeSandbox Examples

🙏 Thank You

react-chrono achieved a major milestone of crossing 2000 stars on Github. I would like to thank everyone who supported the project so far and also those who shared their honest feedback. The new release is the result of those great feedbacks, ideas and suggestions.

Follow me on Twitter @prabhumurthy2

You can also check out some of my other work here prabhumurthy.com

React-Chrono 1.3 out with support for images and videos

Prabhu Murthy — Tue, 20 Oct 2020 18:33:36 +0000

What is react-chrono

react-chrono is a flexible timeline component built for React.
Please follow this link for a detailed introduction and getting started guide that i had posted earlier.

prabhuignoto / react-chrono

Modern Timeline component for React

✨Features

🚥 Render timelines in three different modes (Horizontal, Vertical, Tree).
🌲 With Tree mode, layout the timeline cards vertically in a tree like fashion.
📺 Auto play the timeline with slideshow mode.
🖼️ Display Images & Videos in the timeline with ease.
⌨ Keyboard accessible.
⚡ Data driven API.
🎨 Customize colors with ease.
💪 Built with Typescript.
🎨 Styled with emotion.

🌟 Whats new in 1.3

Embed images and videos in the timeline with ease.
Revamped navigation control.
Improved slideshow experience.
Overall UX enhancements.

Horizontal

Horizontal is the default mode of the component.

Vertical

Tree

Images

Both images and videos can be easily embedded in the timeline. The component is smart enough to automatically hide/disable the images and videos when they are not in the visible area of the containing element.

Slideshow

Slideshow now shows a decreasing progressbar indicating the timeleft on a timeline card. The Slideshow can be quickly paused by hovering over the active item. The slideshow automatically resumes when unhovered from the timeline card.

📦 CodeSandbox Examples

prabhuignoto / react-chrono

Modern Timeline component for React

Thank you for taking the time to read this post and if you have any feedbacks or suggestions, please leave in your comments below.

Smart-Tagz - Input tags component for Vue

Prabhu Murthy — Mon, 28 Sep 2020 19:40:15 +0000

Features

✅ Autosuggest - Supports Autosuggest with easy keyboard selection.

✅ Editable Tags - Tags can be edited inline by double clicking on the tag.

✅ Create tags on Paste - Paste string with delimiters of your choice and the component will auto create the tags for you.

✅ Easy tag deletion - Delete tags easily with delete or backspace.

✅ Quick delete - Quickly delete all tags with CTRL + A, DEL or BACKSPACE.

✅ Support for custom color schemes - easy color scheme customization.

✅ Composition API - Built using the latest Composition API.

Install

yarn install smart-tagz

Getting started

<template>
  <smart-tagz
    autosuggest
    editable
    inputPlaceholder="Select Countries ..."
    :sources="sources"
    :allowPaste="{delimiter: ','}"
    :allowDuplicates="false"
    :maxTags="20"
    :defaultTags="['United Kingdom', 'Uruguay', 'Uzbekistan']"
  />
</template>

<script>
import { SmartTagz } from "smart-tagz";
import "smart-tagz/dist/smart-tagz.css";

export default {
  name: "Basic",
  components: {
    SmartTagz,
  }
};
</script>

💡 Autosuggest

Setting up autosuggest just got lot easier. Configure the datasources and you are good to go.

<smart-tagz autosuggest :sources="sources" />

✏ Easy edit

With the edit mode enabled, double click a tag to make changes to your tags easily.

<smart-tagz editable />

🧹Quick delete

sometimes it's better to just quickly clear all the tags and start from scratch. with quick delete mode, you can select all the tags at once and clear them.

press CTRL + A to select all tags and use DEL key to clear the tags.

<smart-tagz quick-delete />

🔒 Readonly Tags

In readonly mode new tags cannot be added and default tags if set cannot be deleted.

<smart-tagz read-only />

🌈 Theme support

Customize colors with ease.

<smart-tagz
  :theme="{
    primary: '#545454',
    background: '#bdbdbd',
    tagTextColor: '#fff',
  }"
/>

The component comes with many more features. Please visit the demo site to play with all the features.

📺 https://smart-tagz.vercel.app/

prabhuignoto / smart-tagz

Smart input tags for Vue

Feedback and contributions are Welcome.

Introducing vue-float-menu, A Smart floating Menu for Vue 3.

Prabhu Murthy — Mon, 21 Sep 2020 15:41:27 +0000

vue-float-menu

I've been pretty excited about the Vue 3 release lately and was thinking about writing a new component library for Vue 3.

I was badly in need of a draggable floating menu for some of my projects. Although there are some great projects on github targeting Vue 2, I could not find one that could satisfy some of my UX & functional needs.

vue-float-menu is an attempt to create such a flexible menu that can be easily dragged around on the screen with support for sub menus.

Please feel free to send in any feedbacks you have regarding the project or any issues you face while trying out.

⚡ Edit on Stackblitz

⭐ Star this Project

prabhuignoto / vue-float-menu

🎈Customizable floating menu for Vue

Features

✅ Draggable Menu Handle - Drag and easily place the Menu anywhere on screen.

✅ Smart Menu - Detects the top & bottom edges of the screen and flips the menu automatically.

✅ Smart Placement - The Menu head automatically adjusts itself and always stays inside the viewport.

✅ Nested Menus - Support for Nested menus up to any levels.

✅ Composition API - Built using the latest Composition API from Vue 3.

⚙ Installation



yarn install vue-float-menu

🚀 Getting Started

float-menu has some great defaults. Please check the props list for details on all available options.

The following snippet sets the default position of the menu as top left and default menu direction as bottom.



  <float-menu
    position="top left"
    :dimension="50"
    :menu="menuData"
    menu-direction="bottom"
  >
    <BoxIcon />
  </float-menu>

📺 Demo

Props

Prop	Type	Description
dimension	number	dimension of the Menu Head `width x height` in pixels.
position	String	Initial position of the Menu Head. can be any one of the values `top left`, `top right`, `bottom left`, `bottom right`
fixed	Boolean	Disables dragging and the Menu will be fixed. use the `position` prop to fix the menu position
menu-orientation	String	Set's the Menu's orientation. can be `top` or `bottom`.
menu-dimension	Object	Set's the `width` and `minimum` height of the Menu.
menu-data	Object	Array data to generate the nested menu's.
on-selected	Function	Hook that is called on selection.
flip-on-edges	Boolean	Flips the Menu content automatically, when there is no space to display nested menus.

Dimension

dimension prop can be used to set the width and height of the menu head. The prop takes a single number value to set the height and width of the Menu Head.



  <float-menu :dimension=50>
    <BoxIcon />
  </float-menu>

Position

The position prop can be used to set the initial position of the Menu Head. The prop can accept any one of the following values.

top left (default)
top right
bottom left
bottom right



  <float-menu :dimension=50 position="bottom right">
    <BoxIcon />
  </float-menu>

Fixed position

To disable dragging and to fix the position statically, set fixed to true. This prop is disabled by default. Use this prop along with the position prop to set the desired position.



  <float-menu :dimension=50 position="bottom right" fixed>
    <BoxIcon />
  </float-menu>

Menu orientation

sets the default orientation of the menu. can be set to either top or bottom.



  <float-menu :dimension=50 position="bottom right" menu-orientation="bottom">
    <BoxIcon />
  </float-menu>

Menu head dimension

prop to set the height and width of the menu.



  <float-menu
    :dimension=50
    :menu-dimension="{height: 400, width: 300}"
    position="bottom right"
    menu-orientation="bottom"
    <BoxIcon />
  </float-menu>

Populating Menu

Use the menu-data prop to create Simple or Nested menus of your liking. menu-data takes an array of MenuItem type

List of MenuItem properties

property	description
name	display name of the menu item.
id	unique id of each menu item. this is auto generated by the component.
selected	flag to highlight a sub-menu selection.
showSubMenu	flag to show/hide the sub-menu.
subMenu	data for the sub-menu

Here we create a simple Menu structure with 3 Menu items with no sub menus.



const menuData = [
  { name: "New" },
  {
    name: "Edit",
    subMenu: {
      name: "edit-items",
      items: [{ name: "Copy" }, { name: "Paste" }],
    },
  },
  {
    name: "Open Recent",
    subMenu: {
      name: "recent-items",
      items: [{ name: "Document 1" }, { name: "Document 2" }],
    },
  },
]



  <float-menu
    :dimension=50
    :menu-dimension="{height: 400, width: 300}"
    :menu-data="menuData"
    position="bottom right"
    menu-orientation="bottom">
    <BoxIcon />
  </float-menu>

on-select

hook for the menu item selection event.



  <float-menu
    :dimension=50
    position="bottom right"
    :menu-dimension="{height: 400, width: 300}"
    :menu-data="{items: [{name: 'File'}, {name: 'Open'}]}"
    on-select="handleSelection"
    menu-orientation="bottom">
    <BoxIcon />
  </float-menu>

Auto flip on edges

setting this prop flips the menu content on the right edges of the screen. This is useful you have nested menus of many levels.



  <float-menu
    :dimension=50
    position="bottom right"
    flip-on-edges
    on-select="handleSelection"
    menu-orientation="bottom">
    <BoxIcon />
  </float-menu>

Custom icon

To customize the Menu Icon, simply pass any content in between the float-menu tags. Here we render a custom icon.



  <float-menu
    :dimension=50
    :menu-data="menuData"
    menu-orientation="bottom">
    <BoxIcon />
  </float-menu>

and here we render a custom text inside the Menu handle



  <float-menu
    :dimension=50
    :menu-data="menuData"
    menu-orientation="bottom">
    Click
  </float-menu>

🔨 Built with

Vue.JS - The Component is written in Vue + Typescript.

📄 Notes

The project uses vite instead of @vue/cli. I choose vite for speed and i also believe vite will be the future.

Introducing react-chrono - A flexible Timeline component for React

Prabhu Murthy — Fri, 18 Sep 2020 17:01:12 +0000

Introducing react-chrono, a flexible timeline component built for React.

Fork this Repository

Demos

prabhuignoto / react-chrono

🕑 Modern Timeline Component for React

Features

✅ Modes - Render timelines in three unique modes horizontal, vertical or tree.

✅ Tree - Use the Tree mode to layout timeline cards vertically in a tree like fashion.

✅ Slideshow - Auto play the timeline in slideshow mode.

✅ Keyboard Support - Navigate the timelines using UP , DOWN keys in vertical or tree mode. In horizontal mode LEFT , RIGHT keys can be used.

✅ Custom theme - Customize the colors using the theme prop

Installation

yarn install react-chrono

🚀 Getting Started

Please make sure you wrap the component in a container that has a width and height. When no mode is specified, the component defaults to HORIZONTAL mode.

Use the items prop to create the timeline. Each Timeline item have the following properties.

title, contentTitle, contentText, contentDetailedText

Here is an example Timeline with minimal settings.

  const items = [{
    title: "May 1940",
    contentTitle: "Dunkirk",
    contentText:"Men of the British Expeditionary Force (BEF) wade out to a destroyer during the evacuation from Dunkirk.",
    contentDetailedText: "On 10 May 1940, Hitler began his long-awaited offensive in the west...",
  }, ...];

  <div style={{ width: "500px", height: "400px" }}>
    <chrono items={items} />
  </div>

Vertical

To render the timeline vertically use the VERTICAL mode

  <div style={{ width: "500px", height: "950px" }}>
    <chrono
      items={items}
      mode="VERTICAL"
    />
  </div>

Tree

In Tree mode the timeline is rendered vertically with cards alternating between left and right sides.

  <div style={{ width: "500px", height: "950px" }}>
    <chrono
      items={items}
      mode="TREE"
    />
  </div>

Slideshow

Play the timeline automatically with the slideShow mode.

  <div style={{ width: "500px", height: "950px" }}>
    <chrono
      items={items}
      slideShow
    />
  </div>

Try it on CodeSandbox!

Props

name	description	default
mode	sets the layout for the timeline component. can be `HORIZONTAL`, `VERTICAL` or `TREE`	`HORIZONTAL`
items	collection of timeline items	[]
disableNavOnKey	disables keyboard navigation	false
slideShow	starts the timeline in slideshow mode	false
slideItemDuration	The amount of delay in `ms` for the timeline points in `slideshow` mode	2500
titlePosition	sets the position of the title in `HORIZONTAL` mode. can be `TOP` or `BOTTOM`	`TOP`
itemWidth	width of the timeline section in `HORIZONTAL` mode	320

Mode

react-chrono supports three modes HORIZONTAL, VERTICAL and TREE. The mode prop can be used to define the orientation of the cards.

Keyboard Navigation & Disabling it

The timeline by default can be navigated via keyboard.

For HORIZONTAL mode use your LEFT RIGHT arrow keys for navigation.
For VERTICAL or TREE mode, the timeline can be navigated via the UP DOWN arrow keys.
To easily jump to the first item or the last item in the timeline, use HOME or END key.

The keyboard navigation can be completely disabled by setting the disableNavOnKey to true.

  <chrono items={items} disableNavOnKey />

Slideshow Mode

Slideshow can be enabled by setting the slideShow prop to true. You can also set an optional slideItemDuration that sets the time delay between cards.

  <chrono items={items} slideShow slideItemDuration={4500} />

Title Position

This setting only applies for the HORIZONTAL mode. The prop titlePosition sets the position of the individual titles to either TOP or BOTTOM.

  <chrono items={items}  titlePosition="BOTTOM" />

Item Width

The itemWidth prop can be used to set the width of each individual timeline sections. This setting is applicable only for the HORIZONTAL mode.

Built with

ReactJS - The Component is written in React and Typescript.

DEV Community: Prabhu Murthy

React Chrono v3.0: Redefining Timeline Components for Modern React

React Chrono v3.0: A Complete Evolution

What's New at a Glance

🏗️ Architectural Overhaul

From Styled-Components to Vanilla Extract

Unified Context Architecture

✨ New Features

🌐 Comprehensive Internationalization (i18n)

🎭 Google Fonts Integration

🖼️ Fullscreen Mode

🎯 Grouped Configuration API

📌 Sticky Toolbar

🔍 Enhanced Search Configuration

🎪 Enhanced Dark Mode

🐛 Bug Fixes and Improvements

Navigation and Slideshow

Layout and Positioning

Styling and Theming

Performance

📦 Migration Guide

For Existing Users

New Project Setup

🎯 What's Next

Upcoming Features

Community

🙏 Acknowledgments

📚 Resources

🚀 Get Started Today

💬 Feedback & Support

📝 Bug Reports & Feature Requests

💡 Questions & Help

🤝 Contributing

🌟 Show Your Support

🚀 React Chrono: Supercharge Your Timelines with Powerful New Features!

🔍 Enhanced Search Functionality: Find Events in a Flash

💻 Implementation Example

🌙 Comprehensive Dark Mode Support: Style It Your Way

🎨 Custom Dark Theme Example

🖱️ Improved User Experience: Intuitive Interactions

🎮 Customized Controls Example

✨ Advanced Animation System: Bring Your Timelines to Life

🎬 Slideshow Configuration Example

🔗 Nested Timeline Support: For Complex Narratives

🌳 Nested Timeline Structure Example

🖼️ Improved Media Handling: Better Alignment and Display

📸 Media Configuration Example

⚡️ Significant Performance Optimizations: Smooth Sailing for Large Datasets

📊 Large Dataset Optimization Example

🛠️ Developer Experience Enhancements: Build Better, Faster

💻 TypeScript Integration Example

🚀 Migrating to the Latest Release

📦 Installation Steps

⚠️ Migration Notes

🏁 Get Started with React Chrono Today!

🔗 Resources & Links

💬 Community & Support

📝 Summary of New Features

Announcing React-Chrono 2.0: Exciting New Features and Improvements

✨ Revamped Timeline Cards

🌒Dark Mode

🎨Theme Improvements

⚡New Text Overlay Mode

📺Improved Slideshow Function

🌿Nested Timelines

Customize Timeline Points

⚙️Improvements

Conclusion

Introducing react-visual-grid, a smart image grid component for React

Introduction

🖼️ What is react-visual-grid?

💡Why use react-visual-grid?

🚀 Getting started with react-visual-grid

🔨 Building the Grid

🔍 Zoom levels & Image sizes

✨ Resizable & Fullscreen

⚡Performance & Virtualization

🎨 Theme

Conclusion

Meta