react-islamic-prayer-times
TypeScript icon, indicating that this package has built-in type declarations

2.1.3 • Public • Published

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

Vertical 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

License

MIT © [Your Name]

Acknowledgments

Package Sidebar

Install

npm i react-islamic-prayer-times

Weekly Downloads

0

Version

2.1.3

License

MIT

Unpacked Size

195 kB

Total Files

6

Last publish

Collaborators

  • ray.pingwing