moon-cycle/.github/wiki/examples/prayer-app.md

Prayer App Integration

Displaying the current moon phase alongside Islamic prayer times is a natural pairing. moon-cycle maps the current date to the correct NASA image; pray-calc computes the prayer schedule for the same moment.

React component

import { cycleMonth, cdnUrl } from 'moon-cycle';
import { getPrayerTimes } from 'pray-calc';

interface PrayerCardProps {
  date: Date;
  latitude: number;
  longitude: number;
  timezone: string;
}

function PrayerCard({ date, latitude, longitude, timezone }: PrayerCardProps) {
  const filename = cycleMonth(date);
  const moonUrl = cdnUrl(filename, 'mm', 256, 75);

  const times = getPrayerTimes({ date, latitude, longitude, timezone });

  return (
    <div className="prayer-card">
      <img src={moonUrl} alt="Current moon phase" width={128} height={128} />
      <ul>
        <li>Fajr: {times.fajr}</li>
        <li>Dhuhr: {times.dhuhr}</li>
        <li>Asr: {times.asr}</li>
        <li>Maghrib: {times.maghrib}</li>
        <li>Isha: {times.isha}</li>
      </ul>
    </div>
  );
}

Plain JavaScript

import { cycleMonth, cdnUrl } from 'moon-cycle';

const date = new Date();
const filename = cycleMonth(date);
const moonUrl = cdnUrl(filename, 'mm', 256, 75);

// Inject into an existing img element
document.getElementById('moon-img').src = moonUrl;

Pinning to a stable image set

If you want the moon image to stay consistent across deploys, pin the CDN reference to a specific release tag:

const url = cdnUrl(filename, 'mm', 256, 75, 'v2.0.0');

Choosing the right dataset

For a prayer app, the monthly dataset ('mm') is generally the better choice. It reflects the current phase of the synodic cycle, which corresponds to the Islamic lunar calendar month. The yearly dataset ('my') is better when you want to show the actual NASA photograph for today's date in 2023 imagery.

See Also

• pray-calc: Islamic prayer times library
• Basic Usage — other usage patterns
• API Reference — full function documentation