Skip to content

v1.0.0

Latest
Latest

Choose a tag to compare

View all tags
@Asfak00 Asfak00 released this 17 Oct 16:30
· 3 commits to main since this release
v1.0.0
037f62c

ZenUI Labs React Hooks v1.0.0 - Release Notes

Release Date: 2025-10-18
Version: 1.0.0

We are thrilled to announce the v1.0.0 release of ZenUI Labs React Hooks, a fully-featured library of reusable React hooks designed to make modern web development faster, cleaner, and more maintainable.

🎯 Key Features in v1.0.0

  • 49 React Hooks across multiple categories:

    • State Management: useLocalStorage, useSessionStorage, useToggle, useCounter, usePrevious, useUpdate
    • Performance: useDebounce, useThrottle
    • Data Fetching: useFetch, useAsync
    • DOM & Events: useHover, useClickOutside, useWindowSize, useKeyPress, useLongPress, useScroll, useDrop, useDropArea, useEvent
    • Utilities: useCopyToClipboard, useInterval, useCookie
    • Browser & Device: useGeolocation, useHash, useIdle, useIntersection, useLocation, useLockBodyScroll, useMedia, useMediaDevices, useMouse, useMouseWheel, useNetworkState, usePageLeave, useSearchParam, useVisibilityChange
    • Media: useVideo, useAudio, useFullscreen

  • Built for Modern React: Supports hooks, functional components, and TypeScript out of the box.

  • Optimized Performance: Includes useDebounce and useThrottle for handling high-frequency events efficiently.

  • Cross-Tab and Session State Management: Easily persist state with useLocalStorage and useSessionStorage.

  • DOM & Event Handling Made Simple: Detect clicks outside, track hover states, monitor scroll, drag & drop, key presses, and long press interactions.

  • Browser & Device Utilities: Monitor network state, detect idle users, observe element intersections, handle media devices, and control page visibility.

  • Media Controls: Manage audio and video playback with simple hooks, including full-screen support.

  • Utility Helpers: Clipboard management, cookies, intervals, and more.

✅ Highlights

  • Easy-to-Use API: Minimal boilerplate, built with developer productivity in mind.
  • Fully Typed: TypeScript support for all hooks.
  • Highly Modular: Import only the hooks you need to reduce bundle size.
  • Well-Documented: Comprehensive README and usage examples.

🔧 Installation

npm install @zenuilabs/react-hooks

📖 Example

import { useLocalStorage, useDebounce, useToggle } from '@zenuilabs/react-hooks';

function Demo() {
  const {name, setName} = useLocalStorage('name', '');
  const debouncedName = useDebounce(name, 300);
  const { value: isVisible, toggle } = useToggle();

  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <p>Debounced: {debouncedName}</p>
      <button onClick={toggle}>{isVisible ? 'Hide' : 'Show'}</button>
      {isVisible && <p>Hello, {name}!</p>}
    </div>
  );
}

v1.0.0 marks the first stable release, offering a comprehensive set of hooks ready for production use.

ZenUI Labs is committed to building high-quality React utilities. Stay tuned for future updates with more hooks and performance enhancements!

Assets 2
Loading