SDKs
JavaScript / TypeScript

JavaScript & TypeScript SDK

@mumin/coreLicense

The official Mumin SDK provides a verified, type-safe, and cached way to interact with the API. It works in Node.js, Browsers, React, and Vue.

Installation

# Core (Node.js / Vanilla JS)
npm install @mumin/core
 
# React
npm install @mumin/react @mumin/core
 
# Vue
npm install @mumin/vue @mumin/core

Core SDK (Node.js / Vanilla JS)

Suitable for server-side logic (Next.js API routes) or plain JavaScript apps.

Quick Start

javascript
import { MuminClient } from '@mumin/core'

const client = new MuminClient('YOUR_API_KEY')

// 1. Get a random hadith
const random = await client.hadiths.random()
console.log('Random:', random.translation?.text)

// 2. Search for hadiths
const search = await client.search.query('prayer')
console.log('Found:', search.data.length, 'hadiths')

// 3. Get specific hadith
const hadith = await client.hadiths.get(1)
console.log('Hadith #1:', hadith.arabicText)

Client Configuration

const client = new MuminClient("API_KEY", {
  baseURL: "https://api.hadith.mumin.ink/v1",
  timeout: 5000, // 5 seconds
  retries: 3, // Retry failed requests 3 times
  retryDelay: 1000, // Wait 1s between retries
});

React SDK

React hooks for seamless data fetching.

Setup Provider

Wrap your app in MuminProvider:

// App.tsx
import { MuminProvider } from "@mumin/react";
 
export default function App() {
  return (
    <MuminProvider apiKey="YOUR_API_KEY">
      <YourApp />
    </MuminProvider>
  );
}

Usage

import { useHadith } from "@mumin/react";
 
function HadithCard() {
  const { data, loading, error } = useHadith(1);
 
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
 
  return (
    <div className="card">
      <h3>Hadith #{data?.hadithNumber}</h3>
      <p>{data?.translation?.text}</p>
    </div>
  );
}

Vue SDK

Composables for Vue 3 applications.

Setup Plugin

// main.ts
import { createApp } from "vue";
import { MuminPlugin } from "@mumin/vue";
 
const app = createApp(App);
app.use(MuminPlugin, { apiKey: "YOUR_API_KEY" });

Usage

<script setup>
import { useHadith } from "@mumin/vue";
 
const { data, loading } = useHadith(1);
</script>
 
<template>
  <div v-if="loading">Loading...</div>
  <div v-else>
    {{ data?.translation?.text }}
  </div>
</template>

Error Handling

The SDK provides typed error classes:

import { AuthenticationError, RateLimitError } from "@mumin/core";
 
try {
  await client.hadiths.get(1);
} catch (error) {
  if (error instanceof AuthenticationError) {
    console.error("Please check your API key");
  } else if (error instanceof RateLimitError) {
    console.error("Slow down!");
  }
}
OverviewReact