@tarekeldeeb/quran-madina-react 1.0.0 → 1.0.2

package/README.md

@@ -35,6 +35,9 @@ export default function App() {
       {/* a word subsequence (1-based, inclusive) */}
       <QuranMadinaHtml sura={1} aya={1} words="1:2" />
 
+      {/* highlight an error range */}
+      <QuranMadinaHtml sura={1} aya={1} words="1-14" error="10-13" />
+
       {/* no header / copy chrome */}
       <QuranMadinaHtml sura={2} aya="13-14" headless />
 
@@ -56,6 +59,7 @@ export default function App() {
 | `sura`      | number \| string    | Sura 1–114, with `aya`. |
 | `aya`       | number \| string    | Aya or range, e.g. `"8-10"`. |
 | `words`     | string              | 1-based word range: `"1:2"`, `"3-10"`, or a single index. |
+| `error`     | string              | 1-based word range to mark with built-in "error" highlight styling, e.g. `"10-13"`. |
 | `headless`  | boolean             | Drop the header/copy chrome. |
 | `quotes`    | string              | `"no"` (or `"false"`) drops the quote marks shown around inline (single-line) renders. |
 | `inline`    | string              | `"no"` forces the multiline/header layout even for a selection that fits one line. `"auto"` (default) is fit-based. `"yes"` (force a single line for an overflowing selection) is not implemented yet. |

package/dist/index.cjs

@@ -72,6 +72,7 @@ function QuranMadinaHtml({
   sura,
   aya,
   words,
+  error,
   headless,
   quotes,
   inline,
@@ -117,10 +118,11 @@ function QuranMadinaHtml({
       set("aya", aya);
     }
     set("words", words);
+    set("error", error);
     set("headless", headless);
     set("quotes", quotes);
     set("inline", inline);
     set("notitle", notitle);
-  }, [ready, page, sura, aya, words, headless, quotes, inline, notitle]);
+  }, [ready, page, sura, aya, words, error, headless, quotes, inline, notitle]);
   return import_react.default.createElement(TAG, { ref, class: className, style, ...rest });
 }

package/dist/index.d.ts

@@ -27,6 +27,11 @@ export interface QuranMadinaHtmlProps
   aya?: number | string;
   /** Restrict to a 1-based word range, e.g. "1:2", "3-10", or a single index. */
   words?: string;
+  /**
+   * 1-based inclusive word range (same syntax as `words`) marking a sub-range that should
+   * render with the library's built-in "error" highlight styling.
+   */
+  error?: string;
   /** Drop the header / copy chrome and render only the Quran text. */
   headless?: boolean;
   /**

package/dist/index.mjs

@@ -36,6 +36,7 @@ function QuranMadinaHtml({
   sura,
   aya,
   words,
+  error,
   headless,
   quotes,
   inline,
@@ -81,11 +82,12 @@ function QuranMadinaHtml({
       set("aya", aya);
     }
     set("words", words);
+    set("error", error);
     set("headless", headless);
     set("quotes", quotes);
     set("inline", inline);
     set("notitle", notitle);
-  }, [ready, page, sura, aya, words, headless, quotes, inline, notitle]);
+  }, [ready, page, sura, aya, words, error, headless, quotes, inline, notitle]);
   return React.createElement(TAG, { ref, class: className, style, ...rest });
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarekeldeeb/quran-madina-react",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "React wrapper for the quran-madina-html custom element — render Madina-style Quran pages (no images) in React on web and mobile (via a Capacitor WebView).",
   "type": "module",
   "main": "./dist/index.cjs",