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

Demo

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);