Goal: Make toggle logic so clear, it reads like plain English.

“What really matters is how well your code communicates to the people who are going to read it later.” — Kent C. Dodds (Fixate Podcast)

TL;DR: A hook to standardize toggle verbs & states in React.

Define nouns - myModal or myCheckbox instead of isMyModalOpen or isMyCheckboxChecked.

Invoke verbs - open, close, toggle, etc. to change a noun’s state - open(myModal).

Read state - via noun.state - like myModal.isOpen

const [nouns, verbs] = useToggles()
const { open } = verbs            // **standerd verbs:** open/close/toggle **(+/-/♾️)**
const { sidebar, custom } = nouns // create your own **custom toggle nouns**
open(sidebar)                     // updates all +states to true (isOpen/isOn/etc.)
sidebar.isOpen === true           // **standerd states:** isOpen/isClosed **(+/-)**

• Before & After
• Why use it?
• Philosophy

Installation

yarn add toggles

npm i -S toggles

Concept: verb(noun) + noun.state

After examining a laundry list of common UI elements a pattern emerged:

1. verb(noun) → the action you’d naturally speak → check(checkbox)
2. noun.state → a simple boolean: is it on or off → checkbox.isChecked

That is exactly what useToggles codifies through a growing dictionary of +verbs (on), -verbs (off), and a universal ♾️verb (toggle). By leveraging useVerbs, useNoun, or useToggles hooks, we can unify naming across our application, so every UI element’s behavior feels natural and consistent.

API Overview

const [nouns, verbs] = useToggles(...defaultState[]?)

• nouns → Dynamically generated toggleable elements.
  • noun.state → Standardized states (isOpen, isClosed, etc.).
• verbs → Standardized actions (open, close, toggle, etc.).

UI State Lexicon