About The Project

A modern React component for displaying Islamic prayer times with support for both horizontal and vertical layouts.

Horizontal Layout

Vertical Layout

Features

• 🎨 Multiple display options: Horizontal, Vertical, and Minimized
• 🎯 Next prayer time focus mode
• 🌍 Automatic location detection
• ⚡ Real-time updates
• 🎯 Precise prayer times using Aladhan API
• 🔄 Automatic timezone handling
• 📱 Responsive design
• ♿ Accessibility support
• 💅 Customizable styling
• 🕌 Optional Jumu'ah prayer display
• ☀️ Optional Sunrise time display
• ⚙️ Configurable calculation methods
• 🎭 Multiple madhab options

Installation

npm install react-prayer-times
# or
yarn add react-prayer-times

Usage

Basic Usage

import PrayerTimesDisplay from "react-prayer-times";

// Horizontal Layout (default)
function App() {
  return <PrayerTimesDisplay />;
}

// Vertical Layout
function App() {
  return <PrayerTimesDisplay layout="vertical" />;
}

// Minimized View (only next prayer)
function App() {
  return <PrayerTimesDisplay showNextOnly={true} />;
}

With Custom Location

<PrayerTimesDisplay
  location={{
    city: "London",
    country: "UK",
    method: 2, // ISNA method
    school: 0, // Shafi school
  }}
/>

Display Options

// Minimized view with only the next prayer
<PrayerTimesDisplay
  minimized={true}
  showNextOnly={true}
/>

// Full view with only the next prayer
<PrayerTimesDisplay showNextOnly={true} />

// Minimized view with all prayers
<PrayerTimesDisplay minimized={true} />

With Custom Styles

<PrayerTimesDisplay
  styles={{
    container: {
      backgroundColor: "#f8f9fa",
      borderRadius: "12px",
      padding: "20px",
    },
    timeBlock: {
      backgroundColor: "#e9ecef",
      borderRadius: "8px",
    },
    time: {
      color: "#2c3e50",
      fontWeight: "bold",
    },
  }}
/>

With All Options

<PrayerTimesDisplay
  minimized={false}
  showNextOnly={false}
  showSettings={true}
  showJumuah={true}
  showSunrise={true}
  styles={{
    container: { backgroundColor: "#f8f9fa" },
    header: { backgroundColor: "#f0f0f0" },
    timeBlockContainer: { padding: "20px", gap: "2rem" },
    timeBlock: { backgroundColor: "#fff" },
    time: { color: "#333", fontWeight: "bold" },
    title: { color: "#000" }
  }}
  location={{
    city: "London",
    country: "UK",
    method: 2, // ISNA
    school: 0  // Shafi
  }}
/>

Props

| Prop | Type | Default | Description | | -------------- | ------------------------------ | -------------- | ------------------------- | | minimized | boolean | false | Enable minimized view | | showNextOnly | boolean | false | Show only the next prayer | | styles | object | {} | Custom styles | | location | object | {} | Location config | | showSettings | boolean | false | Show settings panel | | showJumuah | boolean | false | Show Jumu'ah prayer on Fridays | | showSunrise | boolean | false | Show Sunrise time | | styles.timeBlockContainer | object | {} | Styles for the prayer times grid container |

Location Configuration

interface LocationConfig {
  address?: string;
  city?: string;
  country?: string;
  state?: string;
  school?: number; // 0: Shafi, 1: Hanafi
  method?: number; // Calculation method (0-23)
}

Compatibility

Supports React versions 16.8.0 through 19.x.x

Built With

• React
• TypeScript
• Aladhan API

License

MIT © [Your Name]

Acknowledgments

• Aladhan API for providing prayer times data
• Lucide Icons for the prayer time icons