@tarekeldeeb/quran-madina-react 0.8.5 → 0.8.7

package/README.md

@@ -37,6 +37,12 @@ export default function App() {
 
       {/* no header / copy chrome */}
       <QuranMadinaHtml sura={2} aya="13-14" headless />
+
+      {/* inline (single-line) render without the quote marks around it */}
+      <QuranMadinaHtml sura={1} aya={3} quotes="no" />
+
+      {/* force the multiline/header layout even though this would normally fit one line */}
+      <QuranMadinaHtml sura={1} aya={3} inline="no" />
     </div>
   );
 }
@@ -51,6 +57,8 @@ export default function App() {
 | `aya`       | number \| string    | Aya or range, e.g. `"8-10"`. |
 | `words`     | string              | 1-based word range: `"1:2"`, `"3-10"`, or a single index. |
 | `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. |
 | `font`      | string              | `Hafs`, `Uthman`, `Amiri Quran`, `Amiri Quran Colored`, `me_quran`. |
 | `name`      | string              | DB name, default `Madina05`. |
 | `fontSize`  | number \| string    | px, default 16. |

package/dist/index.cjs

@@ -73,6 +73,8 @@ function QuranMadinaHtml({
   aya,
   words,
   headless,
+  quotes,
+  inline,
   // loader config (only honored on first mount, see loadQuranMadinaHtml)
   src,
   cdn,
@@ -115,6 +117,8 @@ function QuranMadinaHtml({
     }
     set("words", words);
     set("headless", headless);
-  }, [ready, page, sura, aya, words, headless]);
+    set("quotes", quotes);
+    set("inline", inline);
+  }, [ready, page, sura, aya, words, headless, quotes, inline]);
   return import_react.default.createElement(TAG, { ref, class: className, style, ...rest });
 }

package/dist/index.d.ts

@@ -26,6 +26,15 @@ export interface QuranMadinaHtmlProps
   words?: string;
   /** Drop the header / copy chrome and render only the Quran text. */
   headless?: boolean;
+  /** Set to "no" (or "false") to drop the quote marks shown around inline (single-line) renders. */
+  quotes?: "no" | "auto" | "yes" | boolean | string;
+  /**
+   * "no": force the multiline/header layout even if the selection would fit one line.
+   * "auto" (default): fit-based layout, same as omitting the prop.
+   * "yes": force a single inline line even if the selection overflows it - not implemented yet,
+   * falls back to "auto" with a console warning from the underlying library.
+   */
+  inline?: "no" | "auto" | "yes" | string;
 }
 
 /** Inject the loader script once; resolves when the custom element is registered. */

package/dist/index.mjs

@@ -37,6 +37,8 @@ function QuranMadinaHtml({
   aya,
   words,
   headless,
+  quotes,
+  inline,
   // loader config (only honored on first mount, see loadQuranMadinaHtml)
   src,
   cdn,
@@ -79,7 +81,9 @@ function QuranMadinaHtml({
     }
     set("words", words);
     set("headless", headless);
-  }, [ready, page, sura, aya, words, headless]);
+    set("quotes", quotes);
+    set("inline", inline);
+  }, [ready, page, sura, aya, words, headless, quotes, inline]);
   return React.createElement(TAG, { ref, class: className, style, ...rest });
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarekeldeeb/quran-madina-react",
-  "version": "0.8.5",
+  "version": "0.8.7",
   "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",