Easily add Quran viewer to your react applications! *Please notice that the displayed Quran is in Hafs narration
MIT License
# via npm
npm install react-quran
# via yarn
yarn add react-quran
# via pnpm
pnpm add react-quran
// Import styles; which imports the font of the quran.
import 'react-quran/fonts/index.css'
// Import the ReadingView component.
import { ReadingView } from 'react-quran'
const App = () => {
return (
<div>
<ReadingView
page={2}
readingViewStyles={{
width: '512px',
maxWidth: '100%',
backgroundColor: 'hsl(200 5% 90% / 1)',
borderRadius: 8,
}}
surahTitleStyles={{
color: 'black',
}}
fixedAspectRation={true}
/>
</div>
)
}
export default App
Contributions are welcome! Feel free to submit issues or pull requests.
This 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.
If you have any useful resources that can make this project better, please open an issues and share it!
Distributed under the MIT License. See LICENSE for more information.