react-reftagger ·

Utilize Faithlife RefTagger in sites built with React.

Installation

npm install react-reftagger

yarn add react-reftagger

pnpm i react-reftagger

Usage

Import 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'} />;

Advanced Usage

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>
);