react-reftagger
v2.1.0
Published
RefTagger converts Bible references into links with hover-preview.
Downloads
62
Maintainers
Readme
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>
);