Hooks

Overview

Nurav UI hooks are the logic layer of our component library. They are designed to be lightweight, type-safe, and extremely easy to integrate into any React project. Whether you need to handle complex UI states or add premium auditory feedback, these hooks provide a performance-first solution.

How they Work

Under the hood, Nurav UI hooks focus on efficiency and seamless developer experience.

1. The Power of useContext

While many hooks are standalone, hooks that share global state—such as theme management or notification systems—leverage React Context under the hood. This allows different components across your app to stay in sync without passing props manually (prop-drilling). When you use these hooks, you are often tapping into a centralized state managed provided by the library.

2. Performance Memoization

Every hook is optimized using useCallback and useMemo. This ensures that functions returned by the hooks maintain stable references across renders, preventing your application from suffering through unnecessary re-renders.

3. Persistent Storage

Hooks like useLocalStorage and useSound (for mute state) automatically handle the serialization and deserialization of data to the browser's persistent storage. They also include event listeners to ensure that state is synchronized across multiple open tabs/windows in real-time.

Core Usage

Installing and using hooks follows the same "copy-paste" or CLI philosophy as our components:

npx shadcn@latest add @nurav-ui/use-sound

Example usage:

import { useToggle } from "@/hooks/use-toggle";

export default function App() {
  const [isOpen, toggle] = useToggle(false);

  return (
    <button onClick={toggle}>
      {isOpen ? "Close" : "Open"}
    </button>
  );
}

Available Hooks

Explore the full suite of logic utilities available in Nurav UI:

Customization

Since all hooks are provided as raw source code, you have full control over their implementation. You can easily extend them to add custom logic, more advanced error handling, or specific integration requirements for your backend.