@dataset.sh/react-citation

A headless citation library for react.

Installation

npm i @dataset.sh/react-citation

yarn add @dataset.sh/react-citation

pnpm i @dataset.sh/react-citation

Usage

import {BibEntry, CitationProvider, Cite, JsonResolver, References} from "@dataset.sh/react-citation";

function App() {
    const bibs: BibEntry[] = [
        {
            type: "article",
            id: "rumelhart1986backprop",
            title: "Learning representations by back-propagating errors",
            author: ["Rumelhart, David E.", "Hinton, Geoffrey E.", "Williams, Ronald J."],
            year: 1986,
            journal: "Nature",
            volume: "323",
            pages: "533–536",
            doi: "10.1038/323533a0",
        },
        {
            type: "article",
            id: "kingma2015adam",
            title: "Adam: A Method for Stochastic Optimization",
            author: ["Kingma, Diederik P.", "Ba, Jimmy"],
            year: 2015,
            journal: "International Conference on Learning Representations (ICLR)",
            url: "https://arxiv.org/abs/1412.6980",
            note: "Preprint on arXiv",
        },
        {
            type: "misc",
            id: "turing1936computable",
            title: "On Computable Numbers, with an Application to the Entscheidungsproblem",
            author: ["Turing, Alan M."],
            year: 1936,
            howpublished: "Proceedings of the London Mathematical Society",
            url: "https://doi.org/10.1112/plms/s2-42.1.230",
        },
    ];

    const resolver = JsonResolver(bibs)

    return (
        <>
            <CitationProvider resolver={resolver}>
                <div className="prose">
                    <p>
                        Neural networks gained major traction after the discovery of <Cite id="rumelhart1986backprop"/>.
                    </p>

                    <p>
                        Optimization techniques like <Cite id="kingma2015adam"/> further boosted the training efficiency
                        of
                        deep models.

                    </p>

                    <p>
                        The foundation for these computational models can be traced back even earlier to <Cite
                        id="turing1936computable"/>.
                    </p>
                </div>

                <p style={{marginTop: '20px', fontWeight: 'bold'}}>
                    References:
                </p>

                <div style={{marginTop: '5px'}}>
                    <References/>
                </div>
            </CitationProvider>
        </>
    )
}

Customized Render

You can implement your own Inline citation component and reference component like the following and use them instead of the provided Cite and Reference implementation.

Inline citations:

To create am custom inline citation component, you need to use useCitationContext().cite(id) function to register the citation, and use const {data, error, isLoading} = useCitationDetail(id) to fetch the citation detail.

export function CustomizedCiteInline({id, citationStyle = 'author-year'}: {
    id: string,
    citationStyle?: InlineCitationStyle
}) {
    const ctx = useCitationContext()
    if (citationStyle === 'index') {
        return <DefaultInlineCitation id={id}/>
    } else if (citationStyle === 'author-year') {
        return <DefaultInlineCitationWithName id={id}/>
    } else {
        return <DefaultInlineCitation id={id}/>
    }

}

export function DefaultInlineCitation(
    {
        id
    }: { id: string }) {
    const order = useCitationContext().cite(id);
    return <a href={`#cite-${id}`}>{order}</a>
}

export function DefaultInlineCitationWithName(
    {
        id
    }: { id: string }) {
    const order = useCitationContext().cite(id);
    const {data, error, isLoading} = useCitationDetail(id)

    if (isLoading) return <a href={`#cite-${id}`}>[{order}]</a>

    if (error) return <a href={`#cite-${id}`}>[Invalid Citation]</a>

    return <a href={`#cite-${id}`}>[{data?.author && trimAuthor(data.author[0])} {data?.year}]</a>
}

Full reference List

export function CustomizedReferences() {
    const {cited} = useCitationContext();
    return <div>
        {cited.map((citation, idx) => {
            return <div
                key={citation}
                style={{display: 'flex', flexDirection: 'row', gap: '10px'}}
            >
                <a href={`#cite-${citation}`}>
                    <b>[{idx}]</b>
                </a>
                <DefaultCitationReference
                    id={citation}/>
            </div>
        })}
    </div>
}

export function DefaultCitationReference(
    {
        id
    }: {
        id: string,
    }) {
    const {resolver} = useCitationContext();
    const {data, error, isLoading} = useCitationDetail(id);

    if (isLoading) {
        return <LoadingCircle/>
    }

    if (error) {
        return <div>Failed to fetch reference detail.</div>
    }

    return <>
        <DefaultCitationReferenceView bibEntry={data}/>
    </>
}

Library/Framework support

This is a unopinionated headless library with non extra dependencies other than react itself, so you should be able to integrated it with any frontend framework or libraries of your choice.