Usage

Installation

To use the PassageView component in your project, follow these steps:

npm i ephrem-view

Importing and Using PassageView

Import the PassageView component into your React application:

import React from "react";
import PassageView from "ephrem-view";

const App = () => {
	const bibleName = "Berean Standard Bible";
	const reference = "1 John 3:18";
	const content =
		'<p class="b"></p><p class="m">Little children, let us love not in word and speech, but in action and truth. </p>';
	const rtl = false;
	const copyright =
		"The Holy Bible, Berean Standard Bible, BSB is produced in cooperation with Bible Hub, Discovery Bible, OpenBible.com, and the Berean Bible Translation Committee. This text of God's Word has been dedicated to the public domain";

	return (
		<div
			style={{
				display: "flex",
				justifyContent: "center",
				alignItems: "center",
				height: "100%",
			}}
		>
			<p style={{ lineHeight: 1.5 }}>
				St. Gregory the Great says, “The proof of love is in the works. Where
				love exists, it works great things. But when it ceases to act, it ceases
				to exist,” echoing the Apostle John’s words in{" "}
				<PassageView
					variant={variant}
					color={color}
					darkMode={darkMode}
					highContrast={highContrast}
					bibleName={bibleName}
					content={content}
					copyright={copyright}
					reference={reference}
					rtl={rtl}
				>
					1 John 3:18
				</PassageView>
			</p>
		</div>
	);
};

export default App;

Props

The PassageView component accepts the following props:

• bibleName: The name of the Bible version.
• reference: The scripture reference.
• content: The content of the passage in HTML format (retrieved from API.Bible).
• rtl: Boolean indicating if the text direction is right-to-left.
• copyright: Copyright information for the passage.
• variant: The variant of the view ("outlined", "contained", or "text").
• color: The color theme for the view.
• darkMode: Boolean indicating if dark mode is enabled.
• highContrast: Boolean indicating if high contrast mode is enabled.
• children: The text to be displayed as the anchor.

Screenshots

Outlined Variant

Contained Variant

Text Variant

Contributors

We would like to express our gratitude to the American Bible Society for creating and maintaining the scripture-styles repository, which is used to style scripture text in the Ephrem View tool. We also thank the API.Bible team for providing the API that allows to retrieve scripture passages for display in Ephrem View.

💙 This package was templated with create-typescript-app.