Context

A React component for displaying a list of context files or items with remove functionality, hover interactions, and customizable rendering. Perfect for file attachments, document lists, or context management UIs. Built with TypeScript.

Installation

npm install @sarthakb009/context

Peer Dependencies

Make sure you have these installed in your project:

npm install react react-dom lucide-react

Required versions:

• react ^18.0.0
• react-dom ^18.0.0
• lucide-react ^0.294.0

Note: GSAP is optional. If you want GSAP animations, ensure GSAP is available globally.

Usage

Basic Example

import { Context } from '@sarthakb009/context';
import { FileText } from 'lucide-react';

function App() {
  const items = [
    {
      id: '1',
      name: 'document.pdf',
      type: 'PDF',
      size: '2.4 MB',
      icon: FileText,
    },
    {
      id: '2',
      name: 'spreadsheet.xlsx',
      type: 'XLSX',
      size: '1.2 MB',
    },
  ];

  return (
    <Context
      items={items}
      title="Context Files"
      onRemove={(index, item) => {
        console.log('Removed:', item);
      }}
    />
  );
}

Using files Prop (Alternative)

import { Context } from '@sarthakb009/context';

function App() {
  const files = [
    { name: 'file1.txt', type: 'TXT', size: '100 KB' },
    { name: 'file2.txt', type: 'TXT', size: '200 KB' },
  ];

  return (
    <Context
      files={files}
      title="Attached Files"
    />
  );
}

With Custom Renderers

import { Context } from '@sarthakb009/context';

function App() {
  const items = [
    { id: '1', name: 'Custom Item', type: 'CUSTOM', size: '1 MB' },
  ];

  return (
    <Context
      items={items}
      renderStep={(item, index) => (
        <div>Step {index + 1}</div>
      )}
      renderSection={(item, index) => (
        <div>
          <h3>{item.name}</h3>
          <p>Custom content for {item.type}</p>
        </div>
      )}
    />
  );
}

With Variants and Animations

import { Context } from '@sarthakb009/context';

function App() {
  return (
    <Context
      items={items}
      variant="bordered" // 'default' | 'flat' | 'bordered'
      animated="css" // 'gsap' | 'css' | false
      onToggle={(index, item) => {
        console.log('Toggled:', item);
      }}
    />
  );
}

Props

| Prop | Type | Default | Required | Description | |------|------|---------|----------|-------------| | items | ContextItem[] | undefined | No | List of files or items to display | | files | ContextItem[] | undefined | No | Alternate prop name for items (same as items) | | title | string | "Context Files" | No | Header title text | | variant | 'default' \| 'flat' \| 'bordered' | 'default' | No | Visual variant (affects borders/shadows) | | animated | 'gsap' \| 'css' \| false | 'css' | No | Animation type. GSAP requires global GSAP | | onRemove | (index: number, item: ContextItem) => void | undefined | No | Callback fired when remove button is clicked | | onToggle | (index: number, item: ContextItem) => void | undefined | No | Callback fired when item is clicked | | renderStep | (item: ContextItem, index: number) => React.ReactNode | undefined | No | Custom renderer for the icon/step area | | renderSection | (item: ContextItem, index: number) => React.ReactNode | undefined | No | Custom renderer for the content section | | classes | object | undefined | No | Custom CSS classes for root, header, item, iconBox, removeBtn | | className | string | "" | No | Additional CSS classes for container | | style | React.CSSProperties | undefined | No | Inline styles for container | | id | string | undefined | No | HTML id attribute |

ContextItem Type

interface ContextItem {
  id?: string;
  name: string;
  type: string;
  size: string;
  icon?: LucideIcon;
  [key: string]: any; // Allows additional properties
}

Features

• ✅ File Display: Clean list of files with icons and metadata
• ✅ Remove Functionality: Remove items with callback support
• ✅ Custom Rendering: Full control over item rendering
• ✅ Hover Interactions: Actions appear on hover
• ✅ Animations: CSS or GSAP-powered entrance animations
• ✅ Variants: Multiple visual styles
• ✅ TypeScript: Full TypeScript support with exported types
• ✅ Accessible: Proper ARIA labels and semantic HTML

TypeScript

The component is written in TypeScript and exports all types:

import { Context, ContextProps, ContextItem, AnimationType } from '@sarthakb009/context';

const item: ContextItem = {
  name: 'file.pdf',
  type: 'PDF',
  size: '1 MB',
};

const props: ContextProps = {
  items: [item],
  variant: 'default',
  animated: 'css' as AnimationType,
};

License

MIT