🚀 Socket Launch Week Day 5:Introducing Repository Access Permissions and Custom Roles.Learn more →
Sign In

react-lite-hooks

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-lite-hooks - npm Package Compare versions

Comparing version
2.1.1
 to
2.2.0
+10
dist/useDebounce.d.ts
/**
* Delays updating a value until a specified time has passed.
* Useful for search inputs to avoid excessive API calls.
*
* @param value - The value to debounce
* @param delay - The delay in milliseconds
* @returns The debounced value
*/
export declare function useDebounce<T>(value: T, delay: number): T;
//# sourceMappingURL=useDebounce.d.ts.map
+1
dist/useDebounce.d.ts.map
{"version":3,"file":"useDebounce.d.ts","sourceRoot":"","sources":["../src/useDebounce.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC,CAczD"}
+11
dist/useEventListener.d.ts
/**
* A custom hook that manages event listeners safely.
* It handles adding and removing the listener automatically.
*
* @param eventName - The name of the event to listen for
* @param handler - The callback function to execute
* @param element - The element to attach the listener to (default: window)
*/
export declare function useEventListener<K extends keyof WindowEventMap>(eventName: K, handler: (event: WindowEventMap[K]) => void, element?: Window): void;
export declare function useEventListener<K extends keyof HTMLElementEventMap, T extends HTMLElement = HTMLElement>(eventName: K, handler: (event: HTMLElementEventMap[K]) => void, element: T): void;
//# sourceMappingURL=useEventListener.d.ts.map
+1
dist/useEventListener.d.ts.map
{"version":3,"file":"useEventListener.d.ts","sourceRoot":"","sources":["../src/useEventListener.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,cAAc,EAC7D,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,IAAI,EAC3C,OAAO,CAAC,EAAE,MAAM,GACf,IAAI,CAAC;AAER,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,mBAAmB,EAAE,CAAC,SAAS,WAAW,GAAG,WAAW,EACvG,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,CAAC,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,IAAI,EAChD,OAAO,EAAE,CAAC,GACT,IAAI,CAAC"}
+10
dist/useOnClickOutside.d.ts
import { RefObject } from "react";
/**
* Detects clicks outside of a specified element.
* Essential for closing modals, dropdowns, and flyout menus.
*
* @param ref - React ref object for the element to detect clicks outside of
* @param handler - Function to call when a click outside occurs
*/
export declare function useOnClickOutside<T extends HTMLElement>(ref: RefObject<T | null>, handler: (event: MouseEvent | TouchEvent) => void): void;
//# sourceMappingURL=useOnClickOutside.d.ts.map
+1
dist/useOnClickOutside.d.ts.map
{"version":3,"file":"useOnClickOutside.d.ts","sourceRoot":"","sources":["../src/useOnClickOutside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,WAAW,EACrD,GAAG,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,EACxB,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,QAoBlD"}
+9
dist/usePrevious.d.ts
/**
* Stores the previous value of a state or prop.
* Useful for comparing changes or triggering animations.
*
* @param value - The value to track
* @returns The previous value
*/
export declare function usePrevious<T>(value: T): T | undefined;
//# sourceMappingURL=usePrevious.d.ts.map
+1
dist/usePrevious.d.ts.map
{"version":3,"file":"usePrevious.d.ts","sourceRoot":"","sources":["../src/usePrevious.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,SAAS,CAQtD"}
+13
dist/useWindowSize.d.ts
interface WindowSize {
width: number;
height: number;
}
/**
* Tracks the dimensions of the browser window.
* Useful for responsive layouts and canvas rendering.
*
* @returns An object containing the current window width and height
*/
export declare function useWindowSize(): WindowSize;
export {};
//# sourceMappingURL=useWindowSize.d.ts.map
+1
dist/useWindowSize.d.ts.map
{"version":3,"file":"useWindowSize.d.ts","sourceRoot":"","sources":["../src/useWindowSize.ts"],"names":[],"mappings":"AAEA,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,IAAI,UAAU,CAuB1C"}
+13
LICENSE
Copyright (c) 2024 Pratham Darji
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
copyright notice and this permission notice appear in all copies.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. 
+52
-1
dist/index.d.ts

@@ -21,2 +21,53 @@ import { Dispatch, SetStateAction, RefObject } from 'react';

export { useClipboard, useMediaQuery, useOnScreen, usePersistentState, useToggle };
/**
* Delays updating a value until a specified time has passed.
* Useful for search inputs to avoid excessive API calls.
*
* @param value - The value to debounce
* @param delay - The delay in milliseconds
* @returns The debounced value
*/
declare function useDebounce<T>(value: T, delay: number): T;
/**
* Detects clicks outside of a specified element.
* Essential for closing modals, dropdowns, and flyout menus.
*
* @param ref - React ref object for the element to detect clicks outside of
* @param handler - Function to call when a click outside occurs
*/
declare function useOnClickOutside<T extends HTMLElement>(ref: RefObject<T | null>, handler: (event: MouseEvent | TouchEvent) => void): void;
interface WindowSize {
width: number;
height: number;
}
/**
* Tracks the dimensions of the browser window.
* Useful for responsive layouts and canvas rendering.
*
* @returns An object containing the current window width and height
*/
declare function useWindowSize(): WindowSize;
/**
* Stores the previous value of a state or prop.
* Useful for comparing changes or triggering animations.
*
* @param value - The value to track
* @returns The previous value
*/
declare function usePrevious<T>(value: T): T | undefined;
/**
* A custom hook that manages event listeners safely.
* It handles adding and removing the listener automatically.
*
* @param eventName - The name of the event to listen for
* @param handler - The callback function to execute
* @param element - The element to attach the listener to (default: window)
*/
declare function useEventListener<K extends keyof WindowEventMap>(eventName: K, handler: (event: WindowEventMap[K]) => void, element?: Window): void;
declare function useEventListener<K extends keyof HTMLElementEventMap, T extends HTMLElement = HTMLElement>(eventName: K, handler: (event: HTMLElementEventMap[K]) => void, element: T): void;
export { useClipboard, useDebounce, useEventListener, useMediaQuery, useOnClickOutside, useOnScreen, usePersistentState, usePrevious, useToggle, useWindowSize };
+1
-1
dist/index.d.ts.map

@@ -1,1 +0,1 @@

{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC"}
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC"}
+112
-1
dist/index.js

@@ -135,3 +135,114 @@ import { useState, useEffect, useRef, useCallback } from 'react';

export { useClipboard, useMediaQuery, useOnScreen, usePersistentState, useToggle };
/**
* Delays updating a value until a specified time has passed.
* Useful for search inputs to avoid excessive API calls.
*
* @param value - The value to debounce
* @param delay - The delay in milliseconds
* @returns The debounced value
*/
function useDebounce(value, delay) {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(handler);
};
}, [value, delay]);
return debouncedValue;
}
/**
* Detects clicks outside of a specified element.
* Essential for closing modals, dropdowns, and flyout menus.
*
* @param ref - React ref object for the element to detect clicks outside of
* @param handler - Function to call when a click outside occurs
*/
function useOnClickOutside(ref, handler) {
useEffect(() => {
const listener = (event) => {
const el = ref.current;
// Do nothing if clicking ref's element or descendent elements
if (!el || el.contains(event.target)) {
return;
}
handler(event);
};
document.addEventListener("mousedown", listener);
document.addEventListener("touchstart", listener);
return () => {
document.removeEventListener("mousedown", listener);
document.removeEventListener("touchstart", listener);
};
}, [ref, handler]);
}
/**
* Tracks the dimensions of the browser window.
* Useful for responsive layouts and canvas rendering.
*
* @returns An object containing the current window width and height
*/
function useWindowSize() {
const [windowSize, setWindowSize] = useState({
width: typeof window !== "undefined" ? window.innerWidth : 0,
height: typeof window !== "undefined" ? window.innerHeight : 0,
});
useEffect(() => {
if (typeof window === "undefined")
return;
function handleResize() {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
}
window.addEventListener("resize", handleResize);
handleResize(); // Initialize immediately
return () => window.removeEventListener("resize", handleResize);
}, []);
return windowSize;
}
/**
* Stores the previous value of a state or prop.
* Useful for comparing changes or triggering animations.
*
* @param value - The value to track
* @returns The previous value
*/
function usePrevious(value) {
const ref = useRef(undefined);
useEffect(() => {
ref.current = value;
}, [value]);
return ref.current;
}
function useEventListener(eventName, handler, element) {
// Create a ref that stores handler
const savedHandler = useRef(handler);
useEffect(() => {
savedHandler.current = handler;
}, [handler]);
useEffect(() => {
// Define the listening target
const targetElement = element || window;
if (!(targetElement && targetElement.addEventListener)) {
return;
}
// Create event listener that calls handler function stored in ref
const eventListener = (event) => savedHandler.current(event);
targetElement.addEventListener(eventName, eventListener);
// Remove event listener on cleanup
return () => {
targetElement.removeEventListener(eventName, eventListener);
};
}, [eventName, element]);
}
export { useClipboard, useDebounce, useEventListener, useMediaQuery, useOnClickOutside, useOnScreen, usePersistentState, usePrevious, useToggle, useWindowSize };
//# sourceMappingURL=index.js.map
+1
-1
dist/index.js.map

@@ -1,1 +0,1 @@

{"version":3,"file":"index.js","sources":["../src/usePersistentState.ts","../src/useOnScreen.ts","../src/useClipboard.ts","../src/useMediaQuery.ts","../src/useToggle.ts"],"sourcesContent":[null,null,null,null,null],"names":[],"mappings":"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"}
{"version":3,"file":"index.js","sources":["../src/usePersistentState.ts","../src/useOnScreen.ts","../src/useClipboard.ts","../src/useMediaQuery.ts","../src/useToggle.ts","../src/useDebounce.ts","../src/useOnClickOutside.ts","../src/useWindowSize.ts","../src/usePrevious.ts","../src/useEventListener.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null],"names":[],"mappings":"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"}
+9
-3
package.json
{
"name": "react-lite-hooks",
"version": "2.1.1",
"version": "2.2.0",
"description": "React Utilities",

@@ -29,5 +29,6 @@ "keywords": [

"prepublishOnly": "npm run build",
"lint": "eslint src --ext .ts,.tsx"
"lint": "eslint src"
},
"devDependencies": {
"@eslint/js": "^9.39.1",
"@rollup/plugin-commonjs": "^28.0.6",

@@ -37,6 +38,11 @@ "@rollup/plugin-node-resolve": "^16.0.1",

"@types/react": "^19.1.12",
"@typescript-eslint/eslint-plugin": "^8.47.0",
"@typescript-eslint/parser": "^8.47.0",
"eslint": "^9.39.1",
"globals": "^16.5.0",
"rollup": "^4.50.0",
"rollup-plugin-dts": "^6.2.3",
"tslib": "^2.8.1",
"typescript": "^5.9.2"
"typescript": "^5.9.2",
"typescript-eslint": "^8.47.0"
},

@@ -43,0 +49,0 @@ "dependencies": {

+149
-40
Readme.md
# react-lite-hooks
A **lightweight set of production-ready React hooks** for common UI needs — without extra dependencies.
Save time by eliminating boilerplate for persistent state, clipboard utilities, media queries, and viewport detection.
Save time by eliminating boilerplate for persistent state, clipboard utilities, media queries, viewport detection, and more.

@@ -10,3 +10,3 @@ ---

- **5 essential hooks in one package**
- **10 essential hooks in one package**
- **TypeScript support** out of the box

@@ -34,18 +34,19 @@ - **Tiny, tree-shakeable** build (ESM + types)

### 1. usePersistentState:-
### 1. usePersistentState
#### State that survives page reloads using localStorage
```bash
import { usePersistentState } from "react-lite-hooks";
function App() {
const [name, setName] = usePersistentState("name", "");
return (
<input
value={name}
onChange={e => setName(e.target.value)}
placeholder="Enter your name"
/>
);
}
```tsx
import { usePersistentState } from "react-lite-hooks";
function App() {
const [name, setName] = usePersistentState("name", "");
return (
<input
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Enter your name"
/>
);
}
```

@@ -57,12 +58,13 @@

```bash
import { useClipboard } from "react-lite-hooks";
function CopyButton() {
const { copy, copied } = useClipboard();
return (
<button onClick={() => copy("Hello world!")}>
{copied ? "Copied!" : "Copy text"}
</button>
);
}
```tsx
import { useClipboard } from "react-lite-hooks";
function CopyButton() {
const { copy, copied } = useClipboard();
return (
<button onClick={() => copy("Hello world!")}>
{copied ? "Copied!" : "Copy text"}
</button>
);
}
```

@@ -74,8 +76,9 @@

```bash
import { useMediaQuery } from "react-lite-hooks";
function Component() {
const isDesktop = useMediaQuery("(min-width: 1024px)");
return <p>{isDesktop ? "Desktop view" : "Mobile view"}</p>;
}
```tsx
import { useMediaQuery } from "react-lite-hooks";
function Component() {
const isDesktop = useMediaQuery("(min-width: 1024px)");
return <p>{isDesktop ? "Desktop view" : "Mobile view"}</p>;
}
```

@@ -87,10 +90,11 @@

```bash
import { useRef } from "react";
import { useOnScreen } from "react-lite-hooks";
function LazyImage({ src }: { src: string }) {
const ref = useRef(null);
const isVisible = useOnScreen(ref, "-50px");
return <img ref={ref} src={isVisible ? src : undefined} alt="" />;
}
```tsx
import { useRef } from "react";
import { useOnScreen } from "react-lite-hooks";
function LazyImage({ src }: { src: string }) {
const ref = useRef(null);
const isVisible = useOnScreen(ref, { rootMargin: "-50px" });
return <img ref={ref} src={isVisible ? src : undefined} alt="" />;
}
```

@@ -102,3 +106,3 @@

```bash
```tsx
import { useToggle } from "react-lite-hooks";

@@ -126,2 +130,107 @@

### 6. useDebounce
#### Delays updating a value until a specified time has passed. Perfect for search inputs.
```tsx
import { useState, useEffect } from "react";
import { useDebounce } from "react-lite-hooks";
function Search() {
const [searchTerm, setSearchTerm] = useState("");
const debouncedSearchTerm = useDebounce(searchTerm, 500);
useEffect(() => {
if (debouncedSearchTerm) {
// Trigger API call here
console.log("Searching for:", debouncedSearchTerm);
}
}, [debouncedSearchTerm]);
return <input onChange={(e) => setSearchTerm(e.target.value)} />;
}
```
### 7. useOnClickOutside
#### Detects clicks outside of a specified element. Essential for modals and dropdowns.
```tsx
import { useRef, useState } from "react";
import { useOnClickOutside } from "react-lite-hooks";
function Modal() {
const ref = useRef(null);
const [isOpen, setIsOpen] = useState(true);
useOnClickOutside(ref, () => setIsOpen(false));
if (!isOpen) return null;
return (
<div ref={ref} style={{ border: "1px solid black", padding: 20 }}>
Click outside to close me
</div>
);
}
```
### 8. useWindowSize
#### Tracks the dimensions of the browser window.
```tsx
import { useWindowSize } from "react-lite-hooks";
function ShowSize() {
const { width, height } = useWindowSize();
return (
<p>
Window size: {width} x {height}
</p>
);
}
```
### 9. usePrevious
#### Access the previous value of a state or prop.
```tsx
import { useState } from "react";
import { usePrevious } from "react-lite-hooks";
function Counter() {
const [count, setCount] = useState(0);
const prevCount = usePrevious(count);
return (
<div>
<p>
Now: {count}, before: {prevCount}
</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
```
### 10. useEventListener
#### Safe and easy event listener management.
```tsx
import { useEventListener } from "react-lite-hooks";
function App() {
useEventListener("keydown", (event) => {
if (event.key === "Escape") {
console.log("Escape pressed!");
}
});
return <div>Press Escape</div>;
}
```
## Requirements

@@ -128,0 +237,0 @@