React Todo App Component

A beautiful and functional React Todo App component built with Mantine UI. This component provides a complete todo list application with add, edit, delete, and mark as completed functionality.

✨ Features

• ✅ Add new todos with a clean input form
• ✏️ Edit existing todos inline with keyboard shortcuts
• 🗑️ Delete todos with confirmation
• ☑️ Mark todos as completed with visual feedback
• 📊 Progress tracking with visual progress bar
• 🎨 Beautiful UI built with Mantine components
• 📱 Responsive design that works on all devices
• ⌨️ Keyboard shortcuts (Enter to save, Escape to cancel)
• 🎯 Customizable text for internationalization
• 🔄 Callback support for external state management

🚀 Installation

npm install @yourusername/react-todo-app
# or
yarn add @yourusername/react-todo-app
# or
pnpm add @yourusername/react-todo-app

📦 Peer Dependencies

This component requires the following peer dependencies to be installed in your project:

npm install @mantine/core @mantine/hooks @tabler/icons-react

🎯 Basic Usage

import { TodoApp } from "@yourusername/react-todo-app";
import "@mantine/core/styles.css";

function App() {
  return (
    <div>
      <h1>My Application</h1>
      <TodoApp />
    </div>
  );
}

⚙️ Props

| Prop | Type | Default | Description | | -------------------- | ------------------------- | --------------------------------------- | ------------------------------------ | | title | string | "My Todo List" | Main title of the todo app | | subtitle | string | "Organize your day efficiently" | Subtitle below the title | | placeholder | string | "What do you need to do?" | Placeholder text for the input | | addButtonText | string | "Add" | Text for the add button | | clearButtonText | string | "Clear completed" | Text for the clear completed button | | emptyStateTitle | string | "No pending tasks" | Title when no todos exist | | emptyStateSubtitle | string | "Add your first task to get started!" | Subtitle when no todos exist | | completedMessage | string | "All tasks completed!" | Message when all todos are completed | | pendingMessage | string | "tasks pending" | Text for pending tasks count | | onTodoChange | (todos: Todo[]) => void | undefined | Callback when todos change | | initialTodos | Todo[] | [] | Initial todos to populate the app | | className | string | undefined | CSS class name for styling | | style | React.CSSProperties | undefined | Inline styles for the component |

🔧 Advanced Usage

With Custom Text

import { TodoApp } from "@yourusername/react-todo-app";

function App() {
  return (
    <TodoApp
      title="Mi Lista de Tareas"
      subtitle="Organiza tu día de manera eficiente"
      placeholder="¿Qué necesitas hacer?"
      addButtonText="Agregar"
      clearButtonText="Limpiar completadas"
      emptyStateTitle="No hay tareas pendientes"
      emptyStateSubtitle="¡Agrega tu primera tarea para comenzar!"
      completedMessage="¡Todas las tareas completadas!"
      pendingMessage="tareas pendientes"
    />
  );
}

With External State Management

import { useState } from "react";
import { TodoApp, Todo } from "@yourusername/react-todo-app";

function App() {
  const [todos, setTodos] = useState<Todo[]>([
    { id: 1, text: "Learn React", completed: false },
    { id: 2, text: "Build a todo app", completed: true },
  ]);

  const handleTodoChange = (newTodos: Todo[]) => {
    setTodos(newTodos);
    // You can also save to localStorage, API, etc.
    localStorage.setItem("todos", JSON.stringify(newTodos));
  };

  return <TodoApp initialTodos={todos} onTodoChange={handleTodoChange} />;
}

With Custom Styling

import { TodoApp } from "@yourusername/react-todo-app";

function App() {
  return (
    <TodoApp
      className="my-custom-todo-app"
      style={{
        maxWidth: "800px",
        margin: "0 auto",
        padding: "20px",
      }}
    />
  );
}

🎨 Styling

The component uses Mantine's design system and can be customized using:

• Mantine theme: Override colors, spacing, and typography
• CSS classes: Use the className prop for custom CSS
• Inline styles: Use the style prop for component-specific styling

⌨️ Keyboard Shortcuts

• Enter (in add input): Add new todo
• Enter (in edit input): Save edit
• Escape (in edit input): Cancel edit

📱 Responsive Design

The component automatically adapts to different screen sizes and provides an optimal experience on:

• Desktop computers
• Tablets
• Mobile phones

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Built with Mantine - A fully featured React components library
• Icons from Tabler Icons - Free and open source icons
• Built with React - A JavaScript library for building user interfaces