A generic useDebounce hook that delays updating a value until a specified delay has elapsed since the last change. It uses useEffect with setTimeout and cleanup, and is fully typed with TypeScript generics. This hook is self-contained, has no internal dependencies, and can be extracted into any React project to debounce search inputs, API calls, or any rapidly changing value.

A simple useFetch hook that takes a URL and returns { data, loading } with proper TypeScript generics. It uses useEffect to fetch data on mount and when the URL changes. The hook is minimal, self-contained, and can be easily extended with error handling or abort controllers. It demonstrates a clean pattern for data fetching in functional components.

A useLocalStorage hook that syncs state with localStorage. It initializes state from localStorage (with JSON parsing) and persists changes via useEffect. The hook is generic, handles edge cases (missing key, initial value), and returns a tuple like useState. It is fully self-contained and reusable for any React app needing persistent state.

A reusable Modal component with overlay, close on Escape key, close on overlay click, and proper ARIA attributes. It uses a portal-like pattern (renders in a fixed overlay) and accepts title, children, and onClose. The component is self-contained with its own CSS, handles cleanup of event listeners, and can be extracted into any React project for dialog needs.

A StarRating component with hover and click interactions, customizable max rating, and a display of the current rating. It includes a comprehensive test suite (StarRating.test.tsx) using Jest and Testing Library, covering rendering, selection, and hover highlighting. The component is self-contained, well-typed, and demonstrates a pattern for interactive rating widgets.