react-use-todo v0.7.0
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);