React Prayer Times

A flexible and beautiful React component for displaying Islamic prayer times
View Demo ยป

## About The Project A modern React component for displaying Islamic prayer times with support for both horizontal and vertical layouts. ### Horizontal Layout ![Horizontal Layout](screenshot.png) ### Vertical Layout ![Vertical Layout](screenshot.png) ## 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 yarn add react-prayer-times ``` ## Usage ### Basic Usage ```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 ; } ``` ### With Custom Location ```jsx ``` ### Display Options ```jsx // Minimized view with only the next prayer // Full view with only the next prayer // Minimized view with all prayers ``` ### With Custom Styles ```jsx ``` ### With All Options ```jsx ``` ## 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 ```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](https://aladhan.com/prayer-times-api) ## License MIT ยฉ [Your Name] ## Acknowledgments - [Aladhan API](https://aladhan.com/prayer-times-api) for providing prayer times data - [Lucide Icons](https://lucide.dev/) for the prayer time icons