Build a Prayer Times Component in React and Next.js

This walks through a clean way to put prayer times into a React or Next.js app. We will write a small hook for the client, a server component for SSR, and a styled card component you can drop into a page today.

The endpoint

Everything we need is in one call.

GET https://ummahapi.com/api/prayer-times?lat=40.71&lng=-74.00&method=NorthAmerica&madhab=Hanafi

Response shape (trimmed):

{
  "date": "2026-05-01",
  "location": { "lat": 40.71, "lng": -74.00, "timezone": "America/New_York" },
  "times": {
    "fajr": "04:32", "sunrise": "05:58",
    "dhuhr": "12:54", "asr": "16:42",
    "maghrib": "19:50", "isha": "21:16"
  }
}

Server component (Next.js App Router)

If your app has a fixed location (a mosque website, a city specific app), fetch on the server. No loading state, no layout shift, indexable HTML.

// app/prayer-times/page.tsx
async function getTimes() {
  const r = await fetch(
    'https://ummahapi.com/api/prayer-times?lat=40.71&lng=-74.00&method=NorthAmerica',
    { next: { revalidate: 3600 } } // re-fetch hourly
  );
  return r.json();
}

export default async function Page() {
  const data = await getTimes();
  return <PrayerCard times={data.times} />;
}

Client hook (browser geolocation)

If you want each visitor to see times for their own city, fetch on the client after asking the browser for coordinates.

// hooks/usePrayerTimes.ts
import { useEffect, useState } from 'react';

export function usePrayerTimes(method = 'NorthAmerica') {
  const [data, setData] = useState<any>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    navigator.geolocation.getCurrentPosition(
      async (pos) => {
        const { latitude: lat, longitude: lng } = pos.coords;
        const url = `https://ummahapi.com/api/prayer-times?lat=${lat}&lng=${lng}&method=${method}`;
        const r = await fetch(url);
        setData(await r.json());
      },
      (e) => setError(e.message)
    );
  }, [method]);

  return { data, error };
}

The component

// components/PrayerCard.tsx
type Times = { fajr: string; dhuhr: string; asr: string; maghrib: string; isha: string };

export function PrayerCard({ times }: { times: Times }) {
  const rows = [
    ['Fajr', times.fajr],
    ['Dhuhr', times.dhuhr],
    ['Asr', times.asr],
    ['Maghrib', times.maghrib],
    ['Isha', times.isha],
  ];
  return (
    <div className="rounded-2xl border p-5 bg-white">
      <h3 className="text-base font-semibold mb-3">Today</h3>
      {rows.map(([name, time]) => (
        <div key={name} className="flex justify-between py-1.5 text-sm">
          <span className="text-zinc-500">{name}</span>
          <span className="font-mono">{time}</span>
        </div>
      ))}
    </div>
  );
}

Highlight the next prayer

Most apps want the current and upcoming prayer to stand out. A small helper does it.

function nextPrayer(times: Times) {
  const now = new Date();
  const minutes = (t: string) => {
    const [h, m] = t.split(':').map(Number);
    return h * 60 + m;
  };
  const nowMin = now.getHours() * 60 + now.getMinutes();
  const order = ['fajr','dhuhr','asr','maghrib','isha'] as const;
  return order.find(p => minutes(times[p]) > nowMin) ?? 'fajr';
}

If you do not need a custom UI

Use the drop in widget instead. One script tag, three themes, fully styled.

<script src="https://ummahapi.com/widget.js"></script>
<div data-ummahapi="prayer-times" data-lat="40.71" data-lng="-74"></div>

In React, render the div and load the script in useEffect or via Next.js <Script>.

FAQ

Should I store prayer times in a database?

No. Cache the response in memory or use Next.js revalidate. The API is fast enough that a daily refresh is plenty.

How do I handle timezones?

The API returns local times for the coordinates you pass. The timezone is also in the response if you need it. Do not convert to the server timezone.

Does the API work in React Native?

Yes. Same fetch call. Use expo-location for coordinates and pass them in.