About The Project

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

$3

!Horizontal Layout

$3

!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

``bash
npm install react-prayer-times


or

`jsx
import PrayerTimesDisplay from "react-prayer-times";

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

// Vertical Layout
function App() {
return ;
}

// Minimized View (only next prayer)
function App() {
return ;
}
`

$3

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

$3

`jsx
// Minimized view with only the next prayer
minimized={true}
showNextOnly={true}
/>

// Full view with only the next prayer


// Minimized view with all prayers

`

$3

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

$3

`jsx
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 |

$3

`typescript
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