{"id":14990098,"url":"https://github.com/6km/react-quran","last_synced_at":"2025-06-19T13:41:50.147Z","repository":{"id":240779598,"uuid":"803441379","full_name":"6km/react-quran","owner":"6km","description":"Easily add Quran viewer to your react applications! *Please notice that the displayed Quran is in Hafs narration ","archived":false,"fork":false,"pushed_at":"2025-03-25T11:49:50.000Z","size":3131,"stargazers_count":10,"open_issues_count":8,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T02:05:14.931Z","etag":null,"topics":["arabic","components-library","components-react","islam","islamic","library","quran","quran-api","quran-web","react","react-components","react-ui","react-ui-components","reactjs","web-components"],"latest_commit_sha":null,"homepage":"https://react-quran1.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/6km.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-20T18:21:09.000Z","updated_at":"2025-03-11T00:50:57.000Z","dependencies_parsed_at":"2024-05-20T21:59:40.225Z","dependency_job_id":"02031234-36d4-4906-a6f4-09040df8a93f","html_url":"https://github.com/6km/react-quran","commit_stats":{"total_commits":123,"total_committers":3,"mean_commits":41.0,"dds":"0.24390243902439024","last_synced_commit":"6c29dec52604fc4da96d043cab08991ca1d693c7"},"previous_names":["6km/react-quran"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/6km%2Freact-quran","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/6km%2Freact-quran/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/6km%2Freact-quran/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/6km%2Freact-quran/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/6km","download_url":"https://codeload.github.com/6km/react-quran/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505863,"owners_count":21115354,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["arabic","components-library","components-react","islam","islamic","library","quran","quran-api","quran-web","react","react-components","react-ui","react-ui-components","reactjs","web-components"],"created_at":"2024-09-24T14:19:27.311Z","updated_at":"2025-04-12T02:05:20.264Z","avatar_url":"https://github.com/6km.png","language":"TypeScript","funding_links":[],"categories":["Quranic Text and Reading (170 projects)"],"sub_categories":["TypeScript"],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"images/banner-dark.svg\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"images/banner-light.svg\"\u003e\n    \u003cimg src=\"images/banner-light.svg\"\u003e\n  \u003c/picture\u003e\n  \u003cbr /\u003e\n  \u003ch3\u003ereact-quran\u003c/h3\u003e\n  Easily add Quran viewer to your react applications!\n\u003c/div\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## Installation\n\n```bash\n# via npm\nnpm install react-quran\n\n# via yarn\nyarn add react-quran\n\n# via pnpm\npnpm add react-quran\n```\n\n## Features\n\n- 📦 **High-Quality Text Rendering:**\n  Uses the official Hafs font of the Mushaf, avoiding the use of SVGs to ensure high-customizability.\n- 🎨 **Customizable Layout:**\n  Easily adjust the styles to fit your app needs.\n  This is only intended to be used to implement dark and light mode.\n- 📦 **Lightweight and Fast:**\n  Designed to have a minimal impact on your application's performance.\n- 📘 **TypeScript Support:**\n  Fully compatible with TypeScript.\n\n## Usage\n\n```jsx\n// Import styles; which imports the font of the quran.\nimport 'react-quran/fonts/index.css'\n\n// Import the ReadingView component.\nimport { ReadingView } from 'react-quran'\n\nconst App = () =\u003e {\n    return (\n        \u003cdiv\u003e\n            \u003cReadingView\n                page={2}\n                readingViewStyles={{\n                    width: '512px',\n                    maxWidth: '100%',\n                    backgroundColor: 'hsl(200 5% 90% / 1)',\n                    borderRadius: 8,\n                }}\n                surahTitleStyles={{\n                    color: 'black',\n                }}\n                fixedAspectRation={true}\n            /\u003e\n        \u003c/div\u003e\n    )\n}\n\nexport default App\n```\n\n## Contribute\n\nContributions are welcome! Feel free to submit [issues](https://github.com/6km/react-quran/issues) or [pull requests](https://github.com/6km/react-quran/pulls).\n\n## Thanks\n\nThis could not have been achieved without the grace of Allāh, who helped us to do this, and then the valuable resources that help achieve digital solutions for Muslims and Islam. May allah bless them with His mercy. While not all resources used during development are remembered, here are the ones that come to mind.\n\n- [King Fahd Glorious Qur'an Printing Complex](https://qurancomplex.gov.sa/techquran/dev/)\n  for providing the Uthmani font of the Qur'ān and data of the verses and chapters.\n- [Quran.com](https://quran.com/)\n  for providing their useful API which is used to get verses of the Qur'ān line-by-line.\n- [Tanzil](https://tanzil.net/)\n  for providing a lot of valudable data such as Qur'ān text\n\n![resources](images/resources-logo.png \"Logos of the resources\")\n\nIf you have any useful resources that can make this project better, please open an [issues](https://github.com/6km/react-quran/issues) and share it!\n\n## License\n\nDistributed under the MIT License. See [LICENSE](./LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F6km%2Freact-quran","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F6km%2Freact-quran","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F6km%2Freact-quran/lists"}