hookbase - npm Package Compare versions

Comparing version 0.1.10 to 0.1.11

package.json

 {
   "name": "hookbase",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "type": "module",
@@ -5,0 +5,0 @@ "bin": {

README.md

@@ -1,8 +0,8 @@
-# 📦 React Reusable Hooks
+# Hookbase
 
-A collection of reusable React hooks to simplify state management, side effects, and common UI patterns in your projects.
+A lightweight collection of custom React hooks to simplify common tasks in your React applications. Hookbase provides reusable solutions for managing state, handling side effects, and interacting with browser APIs.
 
----
+## Installation
 
-## 🚀 Installation
+You can run Hookbase using `npx` or install it via npm:
 
@@ -13,18 +13,48 @@ ```bash
 
----
+Or install it as a dependency:
 
-## 📖 Usage
+```bash
+npm install hookbase
+```
 
-Import the hooks you need directly from the package:
+Import the desired hooks into your React components:
 
-```tsx
+```javascript
 import { useBoolean } from "@/hooks/use-boolean";
+```
 
-function App() {
-  const { value, toggle } = useBoolean();
+## Hooks
 
+### `useBoolean`
+
+Manages a boolean state with utility functions to toggle, set to true, or set to false.
+
+#### Parameters
+
+- `defaultValue` (boolean, optional): Initial boolean value. Defaults to `false`. Must be `true` or `false`.
+
+#### Returns
+
+An object with the following properties:
+
+- `value` (boolean): Current boolean state.
+- `setValue` (function): Updates the boolean state.
+- `setTrue` (function): Sets the state to `true`.
+- `setFalse` (function): Sets the state to `false`.
+- `toggle` (function): Toggles the state between `true` and `false`.
+
+#### Example
+
+```javascript
+import { useBoolean } from "@/hooks/use-boolean";
+
+function ToggleComponent() {
+  const { value, setTrue, setFalse, toggle } = useBoolean(false);
+
   return (
     <div>
+      <p>State: {value.toString()}</p>
+      <button onClick={setTrue}>Set True</button>
+      <button onClick={setFalse}>Set False</button>
       <button onClick={toggle}>Toggle</button>
-      {value && <div>Value is true</div>}
     </div>
@@ -35,27 +65,263 @@ );
 
----
+### `useCopyToClipboard`
 
-## 🛠️ Available Hooks
+Handles copying text to the clipboard with a temporary "copied" state indicator.
 
-- useBoolean
-- useCopyToClipboard
-- useDocumentTitle
-- useInterval
-- useIsomorphicLayoutEffect
-- useTimeout
-- useToggle
-- useUnmount
-- useCounter
-- useMousePosition
+#### Parameters
 
----
+- `delay` (number, optional): Duration (in milliseconds) the `isCopied` state remains `true` after copying. Defaults to `2000`.
 
-## 📜 License
+#### Returns
 
-This project is licensed under the [MIT License](./LICENSE).
+A tuple containing:
 
----
+- `copy` (function): Async function to copy text to the clipboard. Returns `true` on success, `false` on failure.
+- `isCopied` (boolean): Indicates if text was recently copied.
 
-## Documentation
+#### Example
 
-Coming soon
+```javascript
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
+
+function CopyButton() {
+  const [copy, isCopied] = useCopyToClipboard();
+
+  const handleCopy = async () => {
+    const success = await copy("Hello, World!");
+    console.log(success ? "Copied!" : "Copy failed");
+  };
+
+  return <button onClick={handleCopy}>{isCopied ? "Copied!" : "Copy Text"}</button>;
+}
+```
+
+### `useDocumentTitle`
+
+Updates the document's title dynamically.
+
+#### Parameters
+
+- `title` (string): The title to set for the document.
+
+#### Returns
+
+None.
+
+#### Example
+
+```javascript
+import { useDocumentTitle } from "@/hooks/use-document-title";
+
+function Page() {
+  useDocumentTitle("My Page Title");
+  return <h1>Hello, World!</h1>;
+}
+```
+
+### `useInterval`
+
+Runs a callback function at specified intervals.
+
+#### Parameters
+
+- `callback` (function): Function to execute on each interval.
+- `delay` (number | null): Interval duration in milliseconds. If `null` or not a number, the interval is paused.
+
+#### Returns
+
+None.
+
+#### Example
+
+```javascript
+import { useInterval } from "@/hooks/use-interval";
+
+function Timer() {
+  const [count, setCount] = React.useState(0);
+
+  useInterval(() => {
+    setCount(count + 1);
+  }, 1000);
+
+  return <p>Count: {count}</p>;
+}
+```
+
+### `useIsomorphicLayoutEffect`
+
+A conditional alias for `useLayoutEffect` (client-side) or `useEffect` (server-side) to handle isomorphic rendering.
+
+#### Usage
+
+Use as a direct replacement for `React.useLayoutEffect` or `React.useEffect`.
+
+#### Example
+
+```javascript
+import { useIsomorphicLayoutEffect } from "@/hooks/use-isomorphic-layout-effect";
+
+function Component() {
+  useIsomorphicLayoutEffect(() => {
+    console.log("Effect ran");
+    return () => console.log("Cleanup");
+  }, []);
+  return <div>Isomorphic Effect</div>;
+}
+```
+
+### `useTimeout`
+
+Executes a callback after a specified delay.
+
+#### Parameters
+
+- `callback` (function): Function to execute after the delay.
+- `delay` (number | null): Delay in milliseconds. If `null` or not a number, the timeout is paused.
+
+#### Returns
+
+None.
+
+#### Example
+
+```javascript
+import { useTimeout } from "@/hooks/use-timeout";
+
+function AlertComponent() {
+  useTimeout(() => {
+    alert("Timeout completed!");
+  }, 3000);
+
+  return <p>Waiting for timeout...</p>;
+}
+```
+
+### `useToggle`
+
+Manages a boolean toggle state with a toggle function.
+
+#### Parameters
+
+- `defaultValue` (boolean, optional): Initial boolean value. Defaults to `false`.
+
+#### Returns
+
+A tuple containing:
+
+- `value` (boolean): Current boolean state.
+- `toggle` (function): Toggles the state between `true` and `false`.
+- `setValue` (function): Updates the boolean state.
+
+#### Example
+
+```javascript
+import { useToggle } from "@/hooks/use-toggle";
+
+function ToggleSwitch() {
+  const [isOn, toggle] = useToggle(false);
+
+  return <button onClick={toggle}>{isOn ? "On" : "Off"}</button>;
+}
+```
+
+### `useUnmount`
+
+Executes a callback when the component unmounts.
+
+#### Parameters
+
+- `func` (function): Function to execute on unmount.
+
+#### Returns
+
+None.
+
+#### Example
+
+```javascript
+import { useUnmount } from "@/hooks/use-unmount";
+
+function Component() {
+  useUnmount(() => {
+    console.log("Component unmounted");
+  });
+  return <div>Hello, World!</div>;
+}
+```
+
+### `useCounter`
+
+Manages a numeric counter with increment, decrement, and reset functions.
+
+#### Parameters
+
+- `initialValue` (number, optional): Initial counter value. Defaults to `0`.
+
+#### Returns
+
+An object with the following properties:
+
+- `count` (number): Current counter value.
+- `increment` (function): Increments the counter by 1.
+- `decrement` (function): Decrements the counter by 1.
+- `reset` (function): Resets the counter to the initial value.
+- `setCount` (function): Updates the counter value.
+
+#### Example
+
+```javascript
+import { useCounter } from "@/hooks/use-counter";
+
+function Counter() {
+  const { count, increment, decrement, reset } = useCounter(0);
+
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={increment}>Increment</button>
+      <button onClick={decrement}>Decrement</button>
+      <button onClick={reset}>Reset</button>
+    </div>
+  );
+}
+```
+
+### `useMousePosition`
+
+Tracks the mouse position relative to the document and a referenced element.
+
+#### Type
+
+- `Position`: `{ x: number; y: number; elementX?: number; elementY?: number; elementPositionX?: number; elementPositionY?: number }`
+
+#### Returns
+
+A tuple containing:
+
+- `state` (Position): Current mouse position with optional element-relative coordinates.
+- `ref` (React.Ref): Reference to attach to an HTML element for relative positioning.
+
+#### Example
+
+```javascript
+import { useMousePosition } from "@/hooks/use-mouse-position";
+
+function MouseTracker() {
+  const [position, ref] = useMousePosition();
+
+  return (
+    <div ref={ref} style={{ height: "200px", border: "1px solid black" }}>
+      <p>
+        Mouse X: {position.x}, Y: {position.y}
+      </p>
+      <p>
+        Element X: {position.elementX ?? "N/A"}, Y: {position.elementY ?? "N/A"}
+      </p>
+    </div>
+  );
+}
+```
+
+## License
+
+MIT License

No alert changes

Improved metrics

Total package byte prevSize

14102

78.8%

Number of lines in readme file

326

443.33%

No dependency changes