react-use-todo
A lightweight todo app hook for React, Next.js, and Gatsby.
It helps you to build todo app with different skins without worring about the logic part. It has many utility methods available on the hook.
Why?
- No dependencies
-
🔥 Persistent todos with local storage, or your own adapter -
⭐️ Supports multiples todos per page -
🥞 Works with Next, Gatsby, React
Quick Start
Install
npm install react-use-todo # yarn add react-use-todo
TodoProvider
You will need to wrap your application with the TodoProvider
component so that the useTodo
hook can access the todo state.
Todos are persisted across visits using localStorage
, unless you specify your own storage
adapter.
Usage
import React from "react";
import ReactDOM from "react-dom";
import { TodoProvider } from "react-use-todo";
ReactDOM.render(
<TodoProvider>{/* render app/todo here */}</TodoProvider>,
document.getElementById("root")
);
Props
Prop | Required | Description |
---|---|---|
id |
No |
id for your todos to enable automatic todos retrieval via window.localStorage . If you pass a id then you can use multiple instances of TodoProvider . |
defaultTodos |
No | set initial state with defaultTodos . |
storage |
No | Must return [getter, setter] . |
useTodo
The useTodo
hook exposes all the getter/setters for your todo state.
loading: boolean
The loading
variable gives you loading state. Useful for async task.
Usage
import { useTodo } from "react-use-todo";
const { loading } = useTodo();
if (loading) // do something
else // something
toggleLoading(loading: boolean)
The toggleLoading
method will help you set the loading state. Useful for async task.
Usage
import { useTodo } from "react-use-todo";
const { toggleLoading, loading } = useTodo();
useEffect(() => {
toggleLoading(true);
fetch(url).then(data => toggleLoading(false);)
}, [])
if (loading) // Show loading state
else // Show data
todos: Array<Object>
The todos
contains the list of todos.
Usage
import { useTodo } from "react-use-todo";
const { todos } = useTodo();
<ul>
{todos.map(todo => <li key={todo.id}>{todos.text}</li>)}
</ul>
filterdTodos: Object
The filterdTodos
filtered array based on the selected filter.
Usage
import { useTodo } from "react-use-todo";
const { filterdTodos: { todos } } = useTodo();
<ul>
{todos.map(todo => <li key={todo.id}>{todos.text}</li>)}
</ul>
filtereTodos(by: string)
The filtereTodos
method to filter todos based on selected filter. Available value (ALL, COMPLETED, UNCOMPLETED)
Usage
import { useTodo } from "react-use-todo";
const {
filtereTodos,
filterdTodos: { filterdBy },
} = useTodo();
<div>
<button
style={{ backgroundColor: filterdBy === "all" && "red" }}
onClick={(_) => filtereTodos("ALL")}
>
All
</button>
<button
style={{ backgroundColor: filterdBy === "completed" && "red" }}
onClick={(_) => filtereTodos("COMPLETED")}
>
Completed
</button>
<button
style={{ backgroundColor: filterdBy === "uncompleted" && "red" }}
onClick={(_) => filtereTodos("UNCOMPLETED")}
>
Uncompleted
</button>
</div>
setTodos(Array<Object>)
The setTodos
method to replace todos with passed todos. Useful for api data.
Usage
import { useTodo } from "react-use-todo";
const { setTodos } = useTodo();
const todos = [{
id: Date.now(),
text: 'first todo',
completed: false,
}]
setTodos(todos);
addTodo(Object)
The addTodo
method to add new todo.
Usage
import { useTodo } from "react-use-todo";
const { addTodo } = useTodo();
// these keys are mandatory to pass while adding your todo.
const todo = {
id: Date.now(),
text: 'first todo',
completed: false,
}
addTodo(todo);
toggleTodo(todoId: string | number)
The toggleTodo
method to toggle the completd state of todo.
Usage
import { useTodo } from "react-use-todo";
const { toggleTodo } = useTodo();
const todo = {
id: Date.now(),
text: 'first todo',
completed: false,
}
<input
id={todo.id}
type="checkbox"
value={todo.completed}
checked={todo.completed}
onChange={(e) => toggleTodo(todo.id)}
/>
updateTodo(todoId: string | number, text: string)
The updateTodo
method to update the text of todo.
Usage
import { useTodo } from "react-use-todo";
const { updateTodo, filterdTodos: { todos } } = useTodo();
updateTodo(todos[0].id, 'Update this');
removeTodo(todoId: string)
The removeTodo
method to remove todo.
Usage
import { useTodo } from "react-use-todo";
const { removeTodo, filterdTodos: { todos } } = useTodo();
removeTodo(todos[0].id);