Skip to content

chewhx/use-todo

Repository files navigation

@chewhx/use-todo

React hook for creating and managing todo state.

Demo

Install

npm install @chewhx/use-todo

Import

import { useTodo } from '@chewhx/use-todo';

useTodo

const {
	allTodos,
	todos,
	completedTodos,
	push,
	pop,
	markDone,
	markNotDone,
	toggleTodo,
	remove,
	update,
	listName,
} = useTodo(listName, {
	initialData?,
	onUpdate?,
	useLocalStorage?,
});

Options

  • listName: string

    • Required
    • A unique key to identify state
    • Ensure that each todo hook has a unique key or it will cause errors with local storage
  • initialData: ITodo[]

    • Optional
    • An array of data to initialize the todo state
  • onUpdate: (ITodo[]) => void

    • Optional
    • A function which will be executed on every state update
    • Receives the full array of todos as param
  • useLocalStorage: boolean

    • Optional
    • To store the todo state on local storage for persistence
    • Data from local storage will take precedence over initialData

Returns

  • allTodos: ITodo[]

    • Array of all todos
  • todos: ITodo[]

    • Array of all todos which are not done
  • completedTodos: ITodo[]

    • Array of all todos which are done
  • push: IPushTodo = (title: string) => void

    • Appends a new todo
  • pop: IPopTodo = () => void

    • Removes the last added todo
  • markDone: IMarkDone = (id: string) => void

    • Mark a todo as done
  • markNotDone: IMarkNotDone = (id: string) => void

    • Mark a todo as not done
  • toggleTodo: IToggleTodo = (id: string) => void

    • Toggle the done status of todo
  • update: IUpdateTodo = (id: string, title: string) => void;

    • Update the title of todo
  • remove: IRemoveTodo = (id: string) => void

    • Remove a specific todo