title
and a isCompleted
flag that we use later to complete the todo. We use React's useState
hook to create a local state of our todos. This allows us to update them later and the list will get re-rendered. Lastly we render a list of all todos.<CreateTodoForm>
shows a single text field for the title. When the form is submitted, it calls the onCreate
callback and closes itself.<List>
component. This makes the action available when the list is empty which is exactly what we want to create our first todo.<ToggleTodoAction>
that we assign to the <List.Item>
:<ToggleTodoAction>
to the list item. By doing this we can use the index
to toggle the appropriate todo. We also added an icon to our todo that reflects the isCompleted
state.<DeleteTodoAction>
and add it to the <List.Item>
.<DeleteTodoAction>
a keyboard shortcut. This way users can delete todos quicker. Additionally, we also added the <CreateTodoAction>
to the <List.Item>
. This makes sure that users can also create new todos when there are some already.<CreateTodoForm>
into a separate command. Then you can create todos also from the root search of Raycast and can even assign a global hotkey to open the form. Also, the todos aren't persisted. If you close the command and reopen it, they are gone. To persist, you can use the storage or write it to disc.