react-hooks-core 1.0.0

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/LICENSE ADDED
@@ -0,0 +1,22 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2024 React Hookify
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
22
+
package/README.md ADDED
@@ -0,0 +1,245 @@
1
+ <div align="center">
2
+ <h1>⚡ React Hookify</h1>
3
+ <p><strong>Production-ready React hooks that solve real-world problems</strong></p>
4
+
5
+ [![NPM Version](https://img.shields.io/npm/v/react-hookify.svg)](https://www.npmjs.com/package/react-hookify)
6
+ [![License](https://img.shields.io/npm/l/react-hookify.svg)](https://github.com/yourusername/react-hookify/blob/main/LICENSE)
7
+ [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
8
+ [![Tests](https://img.shields.io/badge/Tests-92%20Passing-success.svg)](https://github.com/yourusername/react-hookify)
9
+ </div>
10
+
11
+ ---
12
+
13
+ ## 🎯 What is React Hookify?
14
+
15
+ **React Hookify** is a comprehensive collection of production-ready React hooks designed to solve common problems you face when building modern React and Next.js applications. Instead of reinventing the wheel for every project, React Hookify provides battle-tested, well-documented hooks that work out of the box.
16
+
17
+ Whether you're building a SaaS platform, e-commerce site, dashboard, or any production application, React Hookify helps you ship faster with fewer bugs and better user experiences.
18
+
19
+ ---
20
+
21
+ ## 💼 Built for Production
22
+
23
+ ### Why Production Projects Need React Hookify
24
+
25
+ Every production React application faces the same challenges:
26
+
27
+ - **Device Detection** - Need to know if users are on mobile, tablet, or desktop to optimize layouts and features
28
+ - **Network Monitoring** - Handle offline scenarios gracefully, show connection status, sync data when back online
29
+ - **User Activity Tracking** - Implement auto-logout for security, pause expensive operations when idle
30
+ - **Responsive Design** - Build adaptive UIs that respond to viewport changes and system preferences
31
+ - **Performance Optimization** - Adapt content quality based on network speed, battery level, and device capabilities
32
+
33
+ **React Hookify solves these problems** with hooks that are:
34
+ - ✅ **SSR-Compatible** - Works seamlessly with Next.js App Router and Pages Router
35
+ - ✅ **Type-Safe** - Full TypeScript support with proper generics and inference
36
+ - ✅ **Well-Tested** - Comprehensive test coverage ensuring reliability
37
+ - ✅ **Production-Ready** - Used in real-world applications, not just demos
38
+ - ✅ **Zero Dependencies** - Lightweight and performant
39
+ - ✅ **Tree-Shakeable** - Import only what you need, keep bundle sizes minimal
40
+
41
+ ---
42
+
43
+ ## 🚀 How React Hookify Helps Your Production Projects
44
+
45
+ ### ⚡ Faster Development
46
+
47
+ Stop rewriting the same logic for every project. React Hookify provides ready-to-use hooks that handle edge cases, error scenarios, and browser compatibility issues you might miss. Focus on building features, not infrastructure.
48
+
49
+ ### 🐛 Fewer Bugs
50
+
51
+ Every hook in React Hookify is thoroughly tested with comprehensive test suites covering initialization, SSR compatibility, state updates, error handling, cleanup, and edge cases. This means fewer bugs in production and more confidence in your code.
52
+
53
+ ### 📦 Optimized Bundle Size
54
+
55
+ Tree-shakeable imports mean you only bundle what you use. Zero dependencies keep your bundle size minimal. Perfect for production applications where every kilobyte matters.
56
+
57
+ ### 🎯 Better User Experience
58
+
59
+ React Hookify hooks respect user preferences and device capabilities. Detect system dark mode, respect reduced motion preferences, adapt to network conditions, and optimize for battery life. Your users will notice the difference.
60
+
61
+ ### 🔒 Enhanced Security
62
+
63
+ Built-in features like idle detection help you implement security best practices like auto-logout, session management, and activity monitoring without additional complexity.
64
+
65
+ ### 🌐 Universal Compatibility
66
+
67
+ Works with React 18+ and Next.js 13+ (both App Router and Pages Router). SSR-compatible out of the box, so you don't have to worry about hydration mismatches or server-side rendering issues.
68
+
69
+ ---
70
+
71
+ ## ✨ Key Features
72
+
73
+ - ✅ **TypeScript First** - Full type safety with generics and proper inference
74
+ - ✅ **SSR Compatible** - Works seamlessly with Next.js 13+ (App Router & Pages Router)
75
+ - ✅ **Tree-Shakeable** - Import only what you need, keep bundle sizes minimal
76
+ - ✅ **Zero Dependencies** - Lightweight and performant
77
+ - ✅ **Well Tested** - 92+ tests with comprehensive coverage on critical hooks
78
+ - ✅ **Production Ready** - Used in real-world applications
79
+ - ✅ **Accessibility First** - Respects user preferences (reduced motion, contrast, etc.)
80
+ - ✅ **Error Resilient** - Graceful fallbacks and comprehensive error handling
81
+ - ✅ **Performance Optimized** - Minimal re-renders and efficient event handling
82
+
83
+ ---
84
+
85
+ ## 📦 Installation
86
+
87
+ ```bash
88
+ npm install react-hookify
89
+ ```
90
+
91
+ ```bash
92
+ yarn add react-hookify
93
+ ```
94
+
95
+ ```bash
96
+ pnpm add react-hookify
97
+ ```
98
+
99
+ ---
100
+
101
+ ## 🚀 Quick Start
102
+
103
+ All hooks work out of the box with zero configuration. Simply import what you need:
104
+
105
+ ```tsx
106
+ import { useDeviceDetect, useOnline, useIdle, useMediaQuery } from 'react-hookify'
107
+ ```
108
+
109
+ Tree-shakeable imports mean you only bundle what you use, keeping your production bundle size minimal.
110
+
111
+ ---
112
+
113
+ ## 📚 Available Hooks
114
+
115
+ React Hookify provides hooks across multiple categories to help you build production-ready applications:
116
+
117
+ ### 🌐 Browser & Device Hooks
118
+
119
+ Monitor device capabilities, network status, user activity, and system preferences to build adaptive, responsive applications.
120
+
121
+ - **[Device Detection](src/browser/docs/useDeviceDetect.md)** - Detect device type, operating system, and browser environment
122
+ - **[Network Monitoring](src/browser/docs/useOnline.md)** - Real-time online/offline status and connection quality
123
+ - **[User Activity](src/browser/docs/useIdle.md)** - Track user inactivity for security and performance optimization
124
+ - **[Media Queries](src/browser/docs/useMediaQuery.md)** - Listen to CSS media queries in JavaScript for responsive logic
125
+ - **[Network Speed](src/browser/docs/useNetworkSpeed.md)** - Adapt content quality based on connection speed
126
+ - **[Battery Status](src/browser/docs/useBattery.md)** - Optimize features based on device battery level
127
+ - **[Geolocation](src/browser/docs/useGeolocation.md)** - Access user location with proper permission handling
128
+
129
+ For detailed documentation on each hook, visit the [documentation folder](src/browser/docs) or check the individual hook files linked above.
130
+
131
+ ---
132
+
133
+ ## 🎨 Live Demo
134
+
135
+ An interactive demo showcasing all hooks is available in the `next-example` folder. See React Hookify in action with real-time updates and visual indicators.
136
+
137
+ Run locally: `npm run build && npm link && cd next-example && npm link react-hookify && npm run dev`
138
+
139
+ ---
140
+
141
+ ## 🌟 Why Choose React Hookify for Production?
142
+
143
+ ### Problem: Reinventing the Wheel
144
+
145
+ Every React project needs device detection, online status monitoring, responsive design logic, and user activity tracking. Developers waste countless hours implementing these features from scratch, often with bugs, edge cases, and compatibility issues.
146
+
147
+ ### Solution: Production-Ready Hooks
148
+
149
+ React Hookify provides battle-tested hooks that:
150
+ - ✅ Work out of the box with React 18+ and Next.js 13+
151
+ - ✅ Handle SSR/CSR seamlessly without configuration
152
+ - ✅ Include proper TypeScript types with full inference
153
+ - ✅ Cover edge cases you might miss
154
+ - ✅ Are fully tested with 92+ test cases
155
+ - ✅ Follow React best practices and patterns
156
+ - ✅ Have zero dependencies
157
+ - ✅ Are optimized for performance
158
+
159
+ ### Impact on Your Development
160
+
161
+ - ⚡ **Faster Development** - Stop rewriting the same logic, ship features faster
162
+ - 🐛 **Fewer Bugs** - Tested hooks mean fewer edge cases and production issues
163
+ - 📦 **Smaller Bundle** - Tree-shakeable and zero dependencies keep bundles minimal
164
+ - 🎯 **Better UX** - Respect user preferences and device capabilities automatically
165
+ - 🔒 **More Secure** - Built-in security features like idle detection for auto-logout
166
+ - 💰 **Cost Effective** - Reduce development time and maintenance overhead
167
+
168
+ ---
169
+
170
+ ## 🗺️ Roadmap
171
+
172
+ We're actively expanding React Hookify with more production-ready hooks across multiple categories:
173
+
174
+ ### 🔜 Coming Soon
175
+
176
+ - **Timer & Interval Hooks** - `useInterval`, `useTimeout`, `useCountdown`, `useDebounce`, `useThrottle`
177
+ - **UI & DOM Hooks** - `useClickOutside`, `useElementSize`, `useWindowSize`, `useScrollPosition`, `useHover`
178
+ - **Storage Hooks** - `useLocalStorage`, `useSessionStorage`, `useCookie`, `usePersistedState`
179
+ - **Context & Providers** - Global state management and configuration providers
180
+
181
+ ### 🎯 Our Commitment
182
+
183
+ - ✅ **Production-ready only** - Every hook is battle-tested before release
184
+ - ✅ **SSR-first** - Works with Next.js out of the box
185
+ - ✅ **100% test coverage** - Critical hooks are fully tested
186
+ - ✅ **TypeScript-native** - Proper types, not afterthoughts
187
+ - ✅ **Zero breaking changes** - Semantic versioning strictly followed
188
+
189
+ ---
190
+
191
+ ## 🛠️ Development & Testing
192
+
193
+ ### Local Development
194
+
195
+ Use `npm link` to test the package in your projects before publishing. Build the package, link it globally, then link it in your project for instant testing.
196
+
197
+ ### Testing Suite
198
+
199
+ Comprehensive test coverage with 92+ test cases covering initialization, SSR compatibility, state updates, error handling, cleanup, options, edge cases, and TypeScript types.
200
+
201
+ ### Build System
202
+
203
+ Fast builds with `tsup` supporting both CommonJS and ES modules, TypeScript declarations, source maps, and tree-shaking optimization.
204
+
205
+ ---
206
+
207
+ ## 🤝 Contributing
208
+
209
+ We welcome contributions from the community! Whether it's bug fixes, new hooks, documentation improvements, or feature suggestions, your input helps make React Hookify better for everyone.
210
+
211
+ Please see our [Contributing Guide](CONTRIBUTING.md) for guidelines on code style, testing requirements, and the pull request process.
212
+
213
+ ---
214
+
215
+ ## 📝 License
216
+
217
+ MIT License - see [LICENSE](LICENSE) file for details
218
+
219
+ Copyright (c) 2025 React Hookify
220
+
221
+ ---
222
+
223
+ ## 🔗 Links
224
+
225
+ - [NPM Package](https://www.npmjs.com/package/react-hookify)
226
+ - [GitHub Repository](https://github.com/yourusername/react-hookify)
227
+ - [Issue Tracker](https://github.com/yourusername/react-hookify/issues)
228
+ - [Changelog](CHANGELOG.md)
229
+
230
+ ---
231
+
232
+ ## 💬 Support
233
+
234
+ - 🐛 [Report a bug](https://github.com/yourusername/react-hookify/issues/new?template=bug_report.md)
235
+ - ✨ [Request a feature](https://github.com/yourusername/react-hookify/issues/new?template=feature_request.md)
236
+ - 💡 [Ask a question](https://github.com/yourusername/react-hookify/discussions)
237
+
238
+ ---
239
+
240
+ <div align="center">
241
+ <p>Made with ❤️ by developers, for developers</p>
242
+ <p>
243
+ <a href="https://github.com/yourusername/react-hookify">⭐ Star us on GitHub</a>
244
+ </p>
245
+ </div>
@@ -0,0 +1,91 @@
1
+ interface IDeviceDetect {
2
+ isMobile: boolean;
3
+ isTablet: boolean;
4
+ isDesktop: boolean;
5
+ isIOS: boolean;
6
+ isAndroid: boolean;
7
+ isWindows: boolean;
8
+ isMacOS: boolean;
9
+ isLinux: boolean;
10
+ isBrowser: boolean;
11
+ userAgent: string;
12
+ }
13
+ interface IDeviceDetectOptions {
14
+ userAgent?: string;
15
+ ssrMode?: boolean;
16
+ }
17
+
18
+ interface IOnlineOptions {
19
+ onChange?: (isOnline: boolean) => void;
20
+ }
21
+
22
+ interface IIdleOptions {
23
+ events?: string[];
24
+ initialState?: boolean;
25
+ onIdle?: () => void;
26
+ onActive?: () => void;
27
+ }
28
+
29
+ interface IMediaQueryOptions {
30
+ defaultValue?: boolean;
31
+ onChange?: (matches: boolean) => void;
32
+ }
33
+
34
+ type ConnectionType = 'slow-2g' | '2g' | '3g' | '4g' | 'unknown';
35
+ interface INetworkSpeed {
36
+ effectiveType: ConnectionType;
37
+ downlink: number;
38
+ rtt: number;
39
+ saveData: boolean;
40
+ }
41
+ interface INetworkSpeedOptions {
42
+ onChange?: (info: INetworkSpeed) => void;
43
+ }
44
+
45
+ interface IGeolocationCoordinates {
46
+ latitude: number;
47
+ longitude: number;
48
+ accuracy: number;
49
+ altitude: number | null;
50
+ altitudeAccuracy: number | null;
51
+ heading: number | null;
52
+ speed: number | null;
53
+ }
54
+ interface IGeolocation {
55
+ loading: boolean;
56
+ error: GeolocationPositionError | null;
57
+ coordinates: IGeolocationCoordinates | null;
58
+ }
59
+ interface IGeolocationOptions extends PositionOptions {
60
+ enabled?: boolean;
61
+ watch?: boolean;
62
+ onSuccess?: (coordinates: IGeolocationCoordinates) => void;
63
+ onError?: (error: GeolocationPositionError) => void;
64
+ }
65
+
66
+ interface IBattery {
67
+ level: number;
68
+ charging: boolean;
69
+ chargingTime: number;
70
+ dischargingTime: number;
71
+ supported: boolean;
72
+ }
73
+ interface IBatteryOptions {
74
+ onChange?: (status: IBattery) => void;
75
+ }
76
+
77
+ declare function useDeviceDetect(options?: IDeviceDetectOptions): IDeviceDetect;
78
+
79
+ declare function useOnline(options?: IOnlineOptions): boolean;
80
+
81
+ declare function useIdle(timeout: number, options?: IIdleOptions): boolean;
82
+
83
+ declare function useMediaQuery(query: string, options?: IMediaQueryOptions): boolean;
84
+
85
+ declare function useNetworkSpeed(options?: INetworkSpeedOptions): INetworkSpeed;
86
+
87
+ declare function useGeolocation(options?: IGeolocationOptions): IGeolocation;
88
+
89
+ declare function useBattery(options?: IBatteryOptions): IBattery;
90
+
91
+ export { type ConnectionType, type IBattery, type IBatteryOptions, type IDeviceDetect, type IDeviceDetectOptions, type IGeolocation, type IGeolocationCoordinates, type IGeolocationOptions, type IIdleOptions, type IMediaQueryOptions, type INetworkSpeed, type INetworkSpeedOptions, type IOnlineOptions, useBattery, useDeviceDetect, useGeolocation, useIdle, useMediaQuery, useNetworkSpeed, useOnline };
@@ -0,0 +1,91 @@
1
+ interface IDeviceDetect {
2
+ isMobile: boolean;
3
+ isTablet: boolean;
4
+ isDesktop: boolean;
5
+ isIOS: boolean;
6
+ isAndroid: boolean;
7
+ isWindows: boolean;
8
+ isMacOS: boolean;
9
+ isLinux: boolean;
10
+ isBrowser: boolean;
11
+ userAgent: string;
12
+ }
13
+ interface IDeviceDetectOptions {
14
+ userAgent?: string;
15
+ ssrMode?: boolean;
16
+ }
17
+
18
+ interface IOnlineOptions {
19
+ onChange?: (isOnline: boolean) => void;
20
+ }
21
+
22
+ interface IIdleOptions {
23
+ events?: string[];
24
+ initialState?: boolean;
25
+ onIdle?: () => void;
26
+ onActive?: () => void;
27
+ }
28
+
29
+ interface IMediaQueryOptions {
30
+ defaultValue?: boolean;
31
+ onChange?: (matches: boolean) => void;
32
+ }
33
+
34
+ type ConnectionType = 'slow-2g' | '2g' | '3g' | '4g' | 'unknown';
35
+ interface INetworkSpeed {
36
+ effectiveType: ConnectionType;
37
+ downlink: number;
38
+ rtt: number;
39
+ saveData: boolean;
40
+ }
41
+ interface INetworkSpeedOptions {
42
+ onChange?: (info: INetworkSpeed) => void;
43
+ }
44
+
45
+ interface IGeolocationCoordinates {
46
+ latitude: number;
47
+ longitude: number;
48
+ accuracy: number;
49
+ altitude: number | null;
50
+ altitudeAccuracy: number | null;
51
+ heading: number | null;
52
+ speed: number | null;
53
+ }
54
+ interface IGeolocation {
55
+ loading: boolean;
56
+ error: GeolocationPositionError | null;
57
+ coordinates: IGeolocationCoordinates | null;
58
+ }
59
+ interface IGeolocationOptions extends PositionOptions {
60
+ enabled?: boolean;
61
+ watch?: boolean;
62
+ onSuccess?: (coordinates: IGeolocationCoordinates) => void;
63
+ onError?: (error: GeolocationPositionError) => void;
64
+ }
65
+
66
+ interface IBattery {
67
+ level: number;
68
+ charging: boolean;
69
+ chargingTime: number;
70
+ dischargingTime: number;
71
+ supported: boolean;
72
+ }
73
+ interface IBatteryOptions {
74
+ onChange?: (status: IBattery) => void;
75
+ }
76
+
77
+ declare function useDeviceDetect(options?: IDeviceDetectOptions): IDeviceDetect;
78
+
79
+ declare function useOnline(options?: IOnlineOptions): boolean;
80
+
81
+ declare function useIdle(timeout: number, options?: IIdleOptions): boolean;
82
+
83
+ declare function useMediaQuery(query: string, options?: IMediaQueryOptions): boolean;
84
+
85
+ declare function useNetworkSpeed(options?: INetworkSpeedOptions): INetworkSpeed;
86
+
87
+ declare function useGeolocation(options?: IGeolocationOptions): IGeolocation;
88
+
89
+ declare function useBattery(options?: IBatteryOptions): IBattery;
90
+
91
+ export { type ConnectionType, type IBattery, type IBatteryOptions, type IDeviceDetect, type IDeviceDetectOptions, type IGeolocation, type IGeolocationCoordinates, type IGeolocationOptions, type IIdleOptions, type IMediaQueryOptions, type INetworkSpeed, type INetworkSpeedOptions, type IOnlineOptions, useBattery, useDeviceDetect, useGeolocation, useIdle, useMediaQuery, useNetworkSpeed, useOnline };
@@ -0,0 +1,36 @@
1
+ 'use strict';
2
+
3
+ var chunkQCPNR33K_js = require('../chunk-QCPNR33K.js');
4
+
5
+
6
+
7
+ Object.defineProperty(exports, "useBattery", {
8
+ enumerable: true,
9
+ get: function () { return chunkQCPNR33K_js.useBattery; }
10
+ });
11
+ Object.defineProperty(exports, "useDeviceDetect", {
12
+ enumerable: true,
13
+ get: function () { return chunkQCPNR33K_js.useDeviceDetect; }
14
+ });
15
+ Object.defineProperty(exports, "useGeolocation", {
16
+ enumerable: true,
17
+ get: function () { return chunkQCPNR33K_js.useGeolocation; }
18
+ });
19
+ Object.defineProperty(exports, "useIdle", {
20
+ enumerable: true,
21
+ get: function () { return chunkQCPNR33K_js.useIdle; }
22
+ });
23
+ Object.defineProperty(exports, "useMediaQuery", {
24
+ enumerable: true,
25
+ get: function () { return chunkQCPNR33K_js.useMediaQuery; }
26
+ });
27
+ Object.defineProperty(exports, "useNetworkSpeed", {
28
+ enumerable: true,
29
+ get: function () { return chunkQCPNR33K_js.useNetworkSpeed; }
30
+ });
31
+ Object.defineProperty(exports, "useOnline", {
32
+ enumerable: true,
33
+ get: function () { return chunkQCPNR33K_js.useOnline; }
34
+ });
35
+ //# sourceMappingURL=index.js.map
36
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
@@ -0,0 +1,3 @@
1
+ export { useBattery, useDeviceDetect, useGeolocation, useIdle, useMediaQuery, useNetworkSpeed, useOnline } from '../chunk-MWZHFSNO.mjs';
2
+ //# sourceMappingURL=index.mjs.map
3
+ //# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"index.mjs"}