@opensite/hooks 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +58 -81
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,102 +1,79 @@
|
|
|
1
1
|
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
# OpenSite React Hooks Library
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
High-performance React hooks for state management, storage, and more.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
## Overview
|
|
8
8
|
|
|
9
|
-
[
|
|
10
|
-
[](https://www.npmjs.com/package/@opensite/hooks)
|
|
11
|
-
[](./LICENSE)
|
|
12
|
-
[](./tsconfig.json)
|
|
13
|
-
[](#tree-shaking)
|
|
9
|
+
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](https://opensite.ai).
|
|
14
10
|
|
|
15
|
-
##
|
|
11
|
+
## Key Features
|
|
16
12
|
|
|
17
|
-
|
|
13
|
+
- **Performance-Optimized Hooks**: Built to ensure minimal impact on your application's performance.
|
|
14
|
+
- **Modular Design**: Use only what you need with tree-shakable exports and hook-level entry points.
|
|
15
|
+
- **SEO-Friendly**: Designed with best practices to ensure high performance and accessibility.
|
|
16
|
+
- **Wide Range of Capabilities**: Includes hooks for event handling, storage management, responsive utilities, and more.
|
|
18
17
|
|
|
19
18
|
## Installation
|
|
20
19
|
|
|
21
|
-
|
|
22
|
-
pnpm add @opensite/hooks
|
|
23
|
-
```
|
|
20
|
+
To use the OpenSite React Hooks Library, ensure you have Node.js installed. Then, add the library to your project:
|
|
24
21
|
|
|
25
|
-
Peer deps: `react` and `react-dom` (17+).
|
|
26
|
-
|
|
27
|
-
## Quick Start
|
|
28
|
-
|
|
29
|
-
```tsx
|
|
30
|
-
import { useBoolean, useDebounceValue } from "@opensite/hooks";
|
|
31
|
-
|
|
32
|
-
export function SearchBox() {
|
|
33
|
-
const [query, setQuery] = React.useState("");
|
|
34
|
-
const debouncedQuery = useDebounceValue(query, 300);
|
|
35
|
-
const { value: isOpen, setTrue, setFalse } = useBoolean(false);
|
|
36
|
-
|
|
37
|
-
React.useEffect(() => {
|
|
38
|
-
if (debouncedQuery) {
|
|
39
|
-
// fetch results
|
|
40
|
-
}
|
|
41
|
-
}, [debouncedQuery]);
|
|
42
|
-
|
|
43
|
-
return (
|
|
44
|
-
<>
|
|
45
|
-
<button onClick={setTrue}>Open</button>
|
|
46
|
-
{isOpen && (
|
|
47
|
-
<div>
|
|
48
|
-
<input value={query} onChange={(e) => setQuery(e.target.value)} />
|
|
49
|
-
<button onClick={setFalse}>Close</button>
|
|
50
|
-
</div>
|
|
51
|
-
)}
|
|
52
|
-
</>
|
|
53
|
-
);
|
|
54
|
-
}
|
|
55
22
|
```
|
|
56
|
-
|
|
57
|
-
## Hooks
|
|
58
|
-
|
|
59
|
-
- `useBoolean` - Boolean state with stable togglers.
|
|
60
|
-
- `useDebounceValue` - Debounced state for inputs and API calls.
|
|
61
|
-
- `useDebounceCallback` - Debounced function wrapper with optional max wait.
|
|
62
|
-
- `useLocalStorage` - Persistent state with SSR-safe hydration.
|
|
63
|
-
- `useSessionStorage` - Session scoped storage state.
|
|
64
|
-
- `useOnClickOutside` - Dismiss components on outside clicks.
|
|
65
|
-
- `useMediaQuery` - Responsive JavaScript behavior.
|
|
66
|
-
- `useEventListener` - Safe event binding with cleanup.
|
|
67
|
-
- `useIsClient` - Hydration-safe client checks.
|
|
68
|
-
- `useCopyToClipboard` - Clipboard helper with fallback.
|
|
69
|
-
- `usePrevious` - Previous value tracking.
|
|
70
|
-
- `useThrottle` - Throttled state for scroll/resize events.
|
|
71
|
-
- `useResizeObserver` - ResizeObserver-based size tracking.
|
|
72
|
-
- `useHover` - Hover state with pointer events.
|
|
73
|
-
- `useIsomorphicLayoutEffect` - SSR-safe layout effect.
|
|
74
|
-
- `useMap` - Immutable Map state helpers.
|
|
75
|
-
|
|
76
|
-
## Tree Shaking
|
|
77
|
-
|
|
78
|
-
Prefer granular imports to minimize bundle size:
|
|
79
|
-
|
|
80
|
-
```tsx
|
|
81
|
-
import { useMediaQuery } from "@opensite/hooks/core/useMediaQuery";
|
|
82
|
-
import { useBoolean } from "@opensite/hooks/hooks/useBoolean";
|
|
23
|
+
npm install @opensite-ai/react-hooks
|
|
83
24
|
```
|
|
84
25
|
|
|
85
|
-
|
|
26
|
+
### Dependencies
|
|
27
|
+
|
|
28
|
+
- React and React DOM (version 16.8 or higher)
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
## Available Hooks
|
|
32
|
+
|
|
33
|
+
| Hook | Description | Documentation |
|
|
34
|
+
|------|-------------|---------------|
|
|
35
|
+
| [useBoolean](./docs/useBoolean.md) | Manage boolean state with convenient helper methods | [View Docs](./docs/useBoolean.md) |
|
|
36
|
+
| [useCopyToClipboard](./docs/useCopyToClipboard.md) | Copy text to clipboard with automatic reset and browser compatibility | [View Docs](./docs/useCopyToClipboard.md) |
|
|
37
|
+
| [useDebounceCallback](./docs/useDebounceCallback.md) | Debounce callback functions with advanced options | [View Docs](./docs/useDebounceCallback.md) |
|
|
38
|
+
| [useDebounceValue](./docs/useDebounceValue.md) | Debounce state values with configurable delay | [View Docs](./docs/useDebounceValue.md) |
|
|
39
|
+
| [useEventListener](./docs/useEventListener.md) | Attach event listeners to DOM elements with automatic cleanup | [View Docs](./docs/useEventListener.md) |
|
|
40
|
+
| [useHover](./docs/useHover.md) | Detect hover state on elements using pointer events | [View Docs](./docs/useHover.md) |
|
|
41
|
+
| [useIsClient](./docs/useIsClient.md) | Detect if code is running on client-side or server-side | [View Docs](./docs/useIsClient.md) |
|
|
42
|
+
| [useIsomorphicLayoutEffect](./docs/useIsomorphicLayoutEffect.md) | SSR-safe layout effect hook | [View Docs](./docs/useIsomorphicLayoutEffect.md) |
|
|
43
|
+
| [useLocalStorage](./docs/useLocalStorage.md) | Manage state synchronized with localStorage | [View Docs](./docs/useLocalStorage.md) |
|
|
44
|
+
| [useMap](./docs/useMap.md) | Manage Map state with convenient helper methods | [View Docs](./docs/useMap.md) |
|
|
45
|
+
| [useMediaQuery](./docs/useMediaQuery.md) | Responsive design using CSS media queries | [View Docs](./docs/useMediaQuery.md) |
|
|
46
|
+
| [useOnClickOutside](./docs/useOnClickOutside.md) | Detect clicks outside of specified elements | [View Docs](./docs/useOnClickOutside.md) |
|
|
47
|
+
| [usePrevious](./docs/usePrevious.md) | Access the previous value of a state or prop | [View Docs](./docs/usePrevious.md) |
|
|
48
|
+
| [useResizeObserver](./docs/useResizeObserver.md) | Observe element size changes using ResizeObserver API | [View Docs](./docs/useResizeObserver.md) |
|
|
49
|
+
| [useSessionStorage](./docs/useSessionStorage.md) | Manage state synchronized with sessionStorage | [View Docs](./docs/useSessionStorage.md) |
|
|
50
|
+
| [useThrottle](./docs/useThrottle.md) | Throttle value changes with configurable options | [View Docs](./docs/useThrottle.md) |
|
|
86
51
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
52
|
+
## Configuration or Advanced Usage
|
|
53
|
+
|
|
54
|
+
Customize the behavior of `useThrottle` with various options:
|
|
55
|
+
|
|
56
|
+
```javascript
|
|
57
|
+
import { useThrottle } from '@opensite-ai/react-hooks';
|
|
58
|
+
|
|
59
|
+
const throttledValue = useThrottle(value, 300, { leading: true, trailing: false });
|
|
92
60
|
```
|
|
93
61
|
|
|
94
|
-
##
|
|
62
|
+
## Performance Notes
|
|
63
|
+
|
|
64
|
+
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.
|
|
95
65
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
66
|
+
## Contributing
|
|
67
|
+
|
|
68
|
+
We welcome contributions from the community. For contribution guidelines, visit our [GitHub repository](https://github.com/opensite-ai).
|
|
99
69
|
|
|
100
70
|
## License
|
|
101
71
|
|
|
102
|
-
|
|
72
|
+
This project is licensed under the BSD 3-Clause License. See the [LICENSE](./LICENSE) file for more details.
|
|
73
|
+
|
|
74
|
+
## Related Projects
|
|
75
|
+
|
|
76
|
+
- [OpenSite Domain Extractor](https://github.com/opensite-ai/domain_extractor): A high-performance Rust utility for domain extraction.
|
|
77
|
+
- [OpenSite Page Speed Hooks](https://github.com/opensite-ai/page-speed-hooks): Tools to enhance page load performance.
|
|
78
|
+
|
|
79
|
+
Visit [OpenSite AI](https://opensite.ai) for more projects and information.
|