Utilize Faithlife RefTagger in sites built with React.
npm install react-reftagger
yarn add react-reftagger
pnpm i react-reftaggerImport RefTagger for use
import { RefTagger } from 'react-reftagger';Use RefTagger as a component and provide the configuration options as props. Configuration options can be found in the type declaration file or on the RefTagger customization page.
<RefTagger bibleVersion={'ESV'} />;You can have RefTagger run on only part of your DOM via the rootNode configuration option.
const [rootNode, setRootNode] = useState(null as Node);
const setRef = useCallback((node: Node) => {
setRootNode(node);
}, []);
return (
<div>
<div>{`Here's John 1:1.`}</div>
<div ref={setRef}>{`Here's John 1:2.`}</div>
{!rootNode ? null : <RefTagger bibleVersion={'ESV'} rootNode={rootNode} />}
</div>
);