InlineCitation

A React component for displaying text content with inline citation markers. Perfect for academic papers, research documents, or any content that requires source attribution. Built with TypeScript and GSAP animations.

Installation

npm install @sarthakb009/inline-citation

Peer Dependencies

Make sure you have these installed in your project:

npm install react react-dom gsap @gsap/react

Required versions:

• react ^18.0.0
• react-dom ^18.0.0
• gsap ^3.13.0
• @gsap/react ^2.1.2

Usage

Basic Example

import { InlineCitation } from '@sarthakb009/inline-citation';

function App() {
  const content = [
    {
      text: 'This is a sentence with a citation.',
      citation: {
        id: 1,
        label: '1',
        source: 'Smith, J. (2023). Research Paper.',
      },
    },
    {
      text: 'This is another sentence without citation.',
    },
    {
      text: 'Multiple citations can appear in the same text.',
      citation: {
        id: 2,
        label: '2',
        source: 'Doe, A. (2023). Another Source.',
      },
    },
  ];

  return (
    <InlineCitation
      content={content}
      onCitationClick={(citation) => {
        console.log('Citation clicked:', citation);
      }}
    />
  );
}

With Active Citation

import { InlineCitation } from '@sarthakb009/inline-citation';

function App() {
  const [activeCitationId, setActiveCitationId] = useState<number | null>(null);

  return (
    <InlineCitation
      content={content}
      activeCitationId={activeCitationId}
      onCitationClick={(citation) => {
        setActiveCitationId(citation.id as number);
      }}
    />
  );
}

Custom Styling

import { InlineCitation } from '@sarthakb009/inline-citation';

function App() {
  return (
    <InlineCitation
      content={content}
      style={{
        maxWidth: '800px',
        padding: '3rem',
      }}
    />
  );
}

Props

| Prop | Type | Default | Required | Description | |------|------|---------|----------|-------------| | content | ContentBlock[] | - | Yes | Array of content blocks with optional citations | | onCitationClick | (citation: CitationData) => void | undefined | No | Callback fired when citation marker is clicked | | activeCitationId | string \| number \| null | undefined | No | ID of the currently active/highlighted citation | | style | React.CSSProperties | undefined | No | Inline styles for container |

Types

ContentBlock

interface ContentBlock {
  text: string;
  citation?: CitationData;
}

CitationData

interface CitationData {
  id: string | number;
  label?: string;
  source?: string;
}

Features

• ✅ Inline Citations: Seamlessly integrated citation markers
• ✅ Interactive: Click citations to view details
• ✅ Active State: Highlight active citations
• ✅ Academic Style: Warm paper-like design
• ✅ Smooth Animations: GSAP-powered entrance animations
• ✅ TypeScript: Full TypeScript support with exported types
• ✅ Accessible: Proper ARIA labels and keyboard navigation

TypeScript

The component is written in TypeScript and exports all types:

import {
  InlineCitation,
  InlineCitationProps,
  ContentBlock,
  CitationData,
} from '@sarthakb009/inline-citation';

const content: ContentBlock[] = [
  {
    text: 'Example text',
    citation: {
      id: 1,
      label: '1',
      source: 'Source name',
    },
  },
];

License

MIT