npm package: @sarthakb009/inline-citation
Description: Inline Citation
Author: Sarthak
Latest version: 1.0.3

# 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

```bash
npm install @sarthakb009/inline-citation
```

## Peer Dependencies

Make sure you have these installed in your project:

```bash
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

```tsx
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

```tsx
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

```tsx
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

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

### CitationData

```tsx
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:

```tsx
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