Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/prabal-verma/todo-list
This project is a Todo List application built with React and the Context API. It allows users to add, remove, and toggle tasks efficiently, with state management handled seamlessly using the Context API.
https://github.com/prabal-verma/todo-list
Last synced: about 1 month ago
JSON representation
This project is a Todo List application built with React and the Context API. It allows users to add, remove, and toggle tasks efficiently, with state management handled seamlessly using the Context API.
- Host: GitHub
- URL: https://github.com/prabal-verma/todo-list
- Owner: Prabal-verma
- Created: 2024-06-06T20:32:31.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-06-06T20:46:22.000Z (7 months ago)
- Last Synced: 2024-06-06T22:14:08.803Z (7 months ago)
- Language: JavaScript
- Homepage: https://todo-by-poxy.vercel.app/
- Size: 184 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Todo List with Context API
I created a Todo List application using React and the Context API to manage state. This application allows users to add, remove, and toggle tasks efficiently. Utilizing the Context API ensures that state management is streamlined and components can access the necessary state without prop drilling.
## Features
- **Add Tasks**: Easily add new tasks to your todo list.
- **Remove Tasks**: Delete tasks that are no longer needed.
- **Toggle Tasks**: Mark tasks as complete or incomplete with a simple click.
- **Context API**: Efficient state management without prop drilling.
- **Responsive Design**: Works well on both desktop and mobile devices.
## Installation
1. Clone the repository:
```bash
git clone https://github.com/prabal-verma/Todo-list.git
cd react-todo-list
```
## Usage
- **Add a task**: Type your task into the input field and press Enter or click the "Add" button.
- **Remove a task**: Click the delete icon next to the task you want to remove.
- **Toggle a task**: Click on the task to mark it as complete or incomplete.
## Code Overview
### Components
- **TodoApp**: The main component that renders the todo list and input field.
- **TodoList**: Renders the list of tasks.
- **TodoItem**: Represents a single task item.
- **TodoInput**: Handles the input for adding new tasks.
### Context
- **TodoContext**: Provides the state and dispatch methods to components for managing tasks.
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
## Contact
If you have any questions or suggestions, feel free to open an issue or reach out to me at [[email protected]](mailto:[email protected]).