React Floating Prayer Times Component

A customizable, elegant floating prayer times widget for React applications. This component provides real-time prayer time information with location detection and notifications.

Features

• 🕌 Real-time prayer time display
• 🌙 Remaining time until next prayer
• 🔔 Optional prayer time notifications
• 📍 Location detection to find the nearest prayer zone
• 🔍 Searchable prayer zones (Malaysia)
• 🌗 Light and dark mode support
• 📱 Responsive design
• ⚡ Performance optimized

Installation

npm install react-floating-prayer-times
# or
yarn add react-floating-prayer-times
# or
pnpm add react-floating-prayer-times

Basic Usage

import { FloatingPrayerTime } from 'react-floating-prayer-times';

function App() {
  return (
    <div className="your-app">
      {/* Your app content */}
      
      {/* Add the floating prayer time widget */}
      <FloatingPrayerTime />
    </div>
  );
}

export default App;

Required Setup

This component requires Tailwind CSS and the following plugins to be set up in your project:

Tailwind CSS

Make sure you have Tailwind CSS installed and configured in your project:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Update your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    // Add the path to the node_modules package
    './node_modules/react-floating-prayer-times/dist/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

API Integration

By default, the component includes a mock API for demonstration purposes. In a real-world application, you'll need to provide your own API implementation.

You can customize the data fetching behavior by modifying the fetchPrayerTimes function call or by implementing the component with your own API integration.

Custom API Example

Create a wrapper component to use your own API:

import { FloatingPrayerTime } from 'react-floating-prayer-times';
import { useEffect, useState } from 'react';

// Override the default fetchPrayerTimes function
async function myCustomFetchPrayerTimes(zoneCode: string) {
  // Call your own API here
  const response = await fetch(`https://your-prayer-api.com/times?zone=${zoneCode}`);
  const data = await response.json();
  
  // Transform your API response to match the expected format:
  return {
    fajr: data.fajr_time,
    dhuhr: data.dhuhr_time,
    asr: data.asr_time,
    maghrib: data.maghrib_time,
    isha: data.isha_time,
    source: 'your-api'
  };
}

// In your component
export function PrayerTimeWidget() {
  // Initialize your component here and pass your custom fetch function
  return <FloatingPrayerTime />;
}

Customization

The component uses Tailwind CSS for styling and is designed to work with both light and dark themes. You can customize the appearance by overriding the CSS classes in your application.

Browser Support

The component works in all modern browsers and degrades gracefully in older browsers.

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT © Your Name

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request