A React component library for Islamic prayer times
npm install react-islamic-prayer-times
A flexible and beautiful React component for displaying Islamic prayer times
View Demo ยป
A modern React component for displaying Islamic prayer times with support for both horizontal and vertical layouts.
- ๐จ 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
``bash`
npm install react-prayer-timesor
yarn add react-prayer-times
`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
}
`
`jsx`
city: "London",
country: "UK",
method: 2, // ISNA method
school: 0, // Shafi school
}}
/>
`jsx
// Minimized view with only the next prayer
showNextOnly={true}
/>
// Full view with only the next prayer
// Minimized view with all prayers
`
`jsx`
container: {
backgroundColor: "#f8f9fa",
borderRadius: "12px",
padding: "20px",
},
timeBlock: {
backgroundColor: "#e9ecef",
borderRadius: "8px",
},
time: {
color: "#2c3e50",
fontWeight: "bold",
},
}}
/>
`jsx`
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
}}
/>
| 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 |
`typescript``
interface LocationConfig {
address?: string;
city?: string;
country?: string;
state?: string;
school?: number; // 0: Shafi, 1: Hanafi
method?: number; // Calculation method (0-23)
}
Supports React versions 16.8.0 through 19.x.x
- React
- TypeScript
- Aladhan API
MIT ยฉ [Your Name]
- Aladhan API for providing prayer times data
- Lucide Icons for the prayer time icons