Task

A modern, interactive React component for displaying and managing task items with completion status, priority levels, and hover interactions. Built with TypeScript and GSAP animations.

Installation

npm install @sarthakb009/task

Peer Dependencies

Make sure you have these installed in your project:

npm install react react-dom lucide-react gsap @gsap/react

Required versions:

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

Usage

Basic Example

import { Task } from '@sarthakb009/task';

function App() {
  return (
    <Task
      title="Review Q3 Performance Metrics"
      description="Analyze the user retention data and prepare a summary report."
      priority="High"
      dueDate="Due tomorrow"
      completed={false}
    />
  );
}

With Callbacks

import { Task } from '@sarthakb009/task';
import { useState } from 'react';

function App() {
  const [completed, setCompleted] = useState(false);

  return (
    <Task
      title="Complete project documentation"
      description="Write comprehensive docs for the new feature"
      priority="Medium"
      dueDate="Due in 2 days"
      completed={completed}
      onToggle={(isCompleted) => {
        setCompleted(isCompleted);
        console.log('Task toggled:', isCompleted);
      }}
      onMenuClick={() => {
        console.log('Menu clicked');
      }}
    />
  );
}

Completed Task

import { Task } from '@sarthakb009/task';

function App() {
  return (
    <Task
      title="Fix login bug"
      description="Resolve authentication issue on mobile devices"
      priority="High"
      dueDate="Completed yesterday"
      completed={true}
    />
  );
}

Props

| Prop | Type | Default | Required | Description | |------|------|---------|----------|-------------| | title | string | undefined | No | The task title/name | | description | string | undefined | No | Detailed description of the task | | priority | 'Low' \| 'Medium' \| 'High' | undefined | No | Priority level of the task | | dueDate | string | undefined | No | Due date text (e.g., "Due tomorrow", "Due in 2 days") | | completed | boolean | false | No | Whether the task is completed | | onToggle | (completed: boolean) => void | undefined | No | Callback fired when checkbox is clicked | | onMenuClick | () => void | undefined | No | Callback fired when menu button is clicked | | className | string | undefined | No | Additional CSS classes to apply to the container |

Features

• ✅ Completion Status: Visual checkbox with completion state
• ✅ Priority Levels: Color-coded priority indicators
• ✅ Hover Interactions: Menu button appears on hover
• ✅ Smooth Animations: GSAP-powered entrance animations
• ✅ Responsive Design: Adapts to different screen sizes
• ✅ 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 { Task, TaskProps } from '@sarthakb009/task';

const props: TaskProps = {
  title: "My Task",
  priority: "High",
  completed: false,
};

License

MIT