Description:
Hookcn is a collection of reusable React hooks that simplifies development tasks like state management, timeouts, and element interactions.
It’s built with the same philosophy as shadcn/ui, which allows you to copy hooks directly into your project or install them through the shadcn CLI.
Each hook focuses on solving specific problems you encounter daily in React development.
Key Features
- Copy-paste friendly: Each hook works as a standalone utility without external dependencies..
- TypeScript support: Full type safety with proper TypeScript definitions for all hooks.
- Production-ready: Handles edge cases and follows React best practices for performance.
- Modular design: Import only the hooks you need without bloating your bundle.
- Consistent API: Similar naming conventions and patterns across all hooks.
How to Use Hookcn
1. Install specific hooks using your preferred package manager:
# Using pnpm
pnpm dlx shadcn@latest add https://hookcn.ouassim.tech/r/use-boolean
# Using npm
npx shadcn@latest add https://hookcn.ouassim.tech/r/use-boolean
# Using yarn
yarn dlx shadcn@latest add https://hookcn.ouassim.tech/r/use-boolean
# Using bun
bunx --bun shadcn@latest add https://hookcn.ouassim.tech/r/use-boolean2. Import and use hooks in your components:
import { useBoolean } from "@/hooks/use-boolean"
import { useCounter } from "@/hooks/use-counter"
import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
export function ExampleComponent() {
const { value: isOpen, toggle, setTrue, setFalse } = useBoolean(false)
const { count, increment, decrement, reset } = useCounter(0)
const [copiedText, copy] = useCopyToClipboard()
return (
<div>
<button onClick={toggle}>
{isOpen ? 'Close' : 'Open'} Modal
</button>
<div>
<button onClick={decrement}>-</button>
<span>{count}</span>
<button onClick={increment}>+</button>
<button onClick={reset}>Reset</button>
</div>
<button onClick={() => copy('Hello World')}>
{copiedText ? 'Copied!' : 'Copy Text'}
</button>
</div>
)
}Available Hooks and Their APIs
- useBoolean: Manages boolean state with convenience methods.
- useToggle: Simplified boolean toggle functionality.
- useCounter: Numeric state management with increment, decrement, and reset.
- useCopyToClipboard: Clipboard operations with success tracking.
- useDebounceCallback: Delays function execution with cancellation support.
- useTimeout: Executes callbacks after specified delays.
- useInterval: Manages recurring function execution.
- useUnmount: Runs cleanup functions when components unmount.
- useDocumentTitle: Updates document title reactively.
- useMousePosition: Tracks mouse cursor coordinates.
- useIsomorphicLayoutEffect: Environment-aware layout effect hook.
FAQs
Q: Do I need to install the entire hookcn library?
A: No, you install individual hooks using the shadcn CLI. This keeps your bundle size minimal and lets you choose exactly which utilities you need.
Q: Can I modify the hooks after installation?
A: Absolutely. The hooks are copied into your project as source code, so you can modify them to fit your specific requirements. This is one of the main advantages over traditional npm dependencies.
Q: Do the hooks work with TypeScript strict mode?
A: Yes, all hooks include proper TypeScript definitions and work correctly with strict mode enabled. You get full type safety and IntelliSense support.
Q: How do I update hooks to newer versions?
A: Run the same shadcn add command again. The CLI will prompt you to overwrite the existing hook with the updated version.
Q: Are there any peer dependencies I need to install?
A: The hooks only require React as a peer dependency. They don’t introduce any additional external dependencies to your project.
