OpenSite React Hooks Library

High-performance React hooks for state management, storage, and more.

Overview

The OpenSite React Hooks Library provides a suite of high-performance hooks designed to enhance React applications with efficient state management, storage, and event handling capabilities. This library is part of OpenSite AI's open-source ecosystem, emphasizing modularity, performance, and developer-friendly design. Learn more at OpenSite AI.

Key Features

• Performance-Optimized Hooks: Built to ensure minimal impact on your application's performance.
• Modular Design: Use only what you need with tree-shakable exports and hook-level entry points.
• SEO-Friendly: Designed with best practices to ensure high performance and accessibility.
• Wide Range of Capabilities: Includes hooks for event handling, storage management, responsive utilities, and more.

Installation

To use the OpenSite React Hooks Library, ensure you have Node.js installed. Then, add the library to your project:

npm install @opensite-ai/react-hooks

Dependencies

• React and React DOM (version 16.8 or higher)

Available Hooks

| Hook | Description | Documentation | |------|-------------|---------------| | useBoolean | Manage boolean state with convenient helper methods | View Docs | | useCopyToClipboard | Copy text to clipboard with automatic reset and browser compatibility | View Docs | | useDebounceCallback | Debounce callback functions with advanced options | View Docs | | useDebounceValue | Debounce state values with configurable delay | View Docs | | useEventListener | Attach event listeners to DOM elements with automatic cleanup | View Docs | | useHover | Detect hover state on elements using pointer events | View Docs | | useIsClient | Detect if code is running on client-side or server-side | View Docs | | useIsomorphicLayoutEffect | SSR-safe layout effect hook | View Docs | | useLocalStorage | Manage state synchronized with localStorage | View Docs | | useMap | Manage Map state with convenient helper methods | View Docs | | useMediaQuery | Responsive design using CSS media queries | View Docs | | useOnClickOutside | Detect clicks outside of specified elements | View Docs | | usePrevious | Access the previous value of a state or prop | View Docs | | useResizeObserver | Observe element size changes using ResizeObserver API | View Docs | | useSessionStorage | Manage state synchronized with sessionStorage | View Docs | | useThrottle | Throttle value changes with configurable options | View Docs |

Configuration or Advanced Usage

Customize the behavior of useThrottle with various options:

import { useThrottle } from '@opensite-ai/react-hooks';

const throttledValue = useThrottle(value, 300, { leading: true, trailing: false });

Performance Notes

Performance is a core facet of everything we build. The OpenSite React Hooks Library makes use of advanced techniques to optimize rendering and state updates, ensuring that your applications remain fast and responsive.

Contributing

We welcome contributions from the community. For contribution guidelines, visit our GitHub repository.

License

This project is licensed under the BSD 3-Clause License. See the LICENSE file for more details.

Related Projects

• OpenSite Domain Extractor: A high-performance Rust utility for domain extraction.
• OpenSite Page Speed Hooks: Tools to enhance page load performance.

Visit OpenSite AI for more projects and information.