Recipe Card in React

Project Details

The Recipe Card component is designed to be a solution for recipe-based applications, from cooking blogs to restaurant menus. It combines visual design with robust functionality, offering a flexible foundation that can be customised to match any design system while maintaining accessibility standards. The component accepts complete <img> elements, giving you full control over image attributes like lazy loading, error handling, and styling. The rating system supports half-star precision, null ratings for unrated content, and customizable star colors. With comprehensive error handling, TypeScript support, and WCAG AA compliance, this component provides reliability for any recipe display needs.

View Live Site View on GitHub

Features

Core Functionality

  • Responsive Design - Aims to adapt to all screen sizes with smooth hover effects

  • Advanced Rating System - Full star, half-star, and empty star support with a 0 - 5 scale

  • Flexible Image Support - Accepts complete <img>elements with full attribute control to allow for a high level of accessibility

  • Customizable Styling - Override CSS classes and colours to match any design system

Developer Experience

  • Full TypeScript Support - Complete type definitions and IDE autocomplete

  • Zero Dependencies - Lightweight component with no external dependencies

  • Comprehensive Validation - Built-in prop validation with helpful error messages

  • Performance Optimised - Memoised rendering and efficient re-renders

Accessibility & Standards

  • WCAG AA Compliant - Built with accessibility as a first-class concern

  • Semantic HTML - Proper use of <article>elements and ARIA attributes

  • Keyboard Navigation - Full keyboard support with focus management

  • Screen Reader Support - Comprehensive announcements for all interactive elements

Customization Options

  • Optional Recipe Button - Add custom action buttons with event handlers

  • Custom Star Colours - Match your brand with customizable star colours

  • Flexible Text Content - Customise placeholder text for all rating states

  • Advanced Custom Containers - Replace entire rating sections with custom content

Rating States

  • Positive Ratings - Display filled stars with numeric values

  • Zero Ratings - Special handling and messaging for 0-star ratings

  • Null Ratings - Elegant "not rated" state for unrated content

  • Show/Hide Rating configuration - Optional numeric rating display

Error Handling & Validation

  • Prop Validation - Automatic validation with user-friendly error messages

  • Bounds Checking - Ensures ratings stay within valid 0-5 range

  • Image Validation - Validates React elements for image props

  • Error Boundaries - Graceful error handling without breaking the UI

Performance Features

  • Smart Memoisation - Uses React.useMemo for efficient star calculations

  • Optimised Re-renders - Only updates when props actually change

  • Mobile Optimised - Smooth animations and touch-friendly interactions

Package Quality

  • Proper npm Structure - Correctly packaged for easy installation and distribution

  • Type Safety - Full TypeScript coverage with exported interfaces

  • Comprehensive Documentation - Detailed examples and API reference

  • Version Control Ready - Semantic versioning and proper build processes