npm package: @sharma.mukesh/react-dsa-hooks
Description: DSA and JS logic React hooks
Author: sharma.mukesh
Latest version: 1.0.4

## 📦 Available Hooks

### 1. `useLocalStorage`

Persists state in the browser’s **localStorage**.

```jsx
import React from "react";
import { useLocalStorage } from "react-use-storage";

function Counter() {
  const [count, setCount, removeCount] = useLocalStorage("count", 0);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
      <button onClick={() => removeCount()}>Reset</button>
    </div>
  );
}
```

### 2. `useSessionStorage`

Persists state in the browser’s **sessionStorage**.

```jsx
import React from "react";
import { useSessionStorage } from "react-use-storage";

function AuthTokenExample() {
  const [token, setToken, clearToken] = useSessionStorage("token", null);

  return (
    <div>
      <h2>Session Token: {token}</h2>
      <button onClick={() => setToken("abc123")}>Set Token</button>
      <button onClick={clearToken}>Clear</button>
    </div>
  );
}
```

## 🛠 API

Each hook returns an array:

```ts
const [value, setValue, remove] = useLocalStorage<T>(key: string, defaultValue: T);
```

- `value`: current stored value
- `setValue`: function to update the value
- `remove`: function to clear the value

## ⚡ Features

- 🔄 Automatically syncs with `localStorage` / `sessionStorage`
- 🗑 Built-in remove function
- ✅ Works with JSON serializable values
- 🛠 TypeScript support

## 🔥 Example Hook: `useModal`

The `useModal` hook helps you easily manage modal dialogs with **open/close state**.

### ⚡ Setup Instructions

1. **Update your `index.html`**

   Add a `div` with an `id="modal-root"` just above the closing `</body>` tag:

   ```html
   <!DOCTYPE html>
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>React App</title>
     </head>
     <body>
       <div id="root"></div>
       <div id="modal-root"></div>
     </body>
   </html>
   ```

   This is required because the `Modal` component uses **React Portals** to render outside the main React tree.

2. **Use the `useModal` hook in your component**

   ```jsx
   import React from "react";
   import { useModal } from "react-dsa-hook";
   import Modal from "./Modal"; // Your modal component

   export default function App() {
     const [isOpen, openModal, closeModal] = useModal();

     return (
       <div>
         <button onClick={openModal}>Open Modal</button>

         <Modal isOpen={isOpen} onClose={closeModal}>
           <h2>Hello from Modal!</h2>
           <p>This modal is controlled using useModal.</p>
         </Modal>
       </div>
     );
   }
   ```

3. **Customize your modal styles (optional)**

   The `Modal` component supports `modalStyle`, `buttonStyle`, and you can even extend it to accept `overlayStyle`.

   ```jsx
   <Modal
     isOpen={isOpen}
     onClose={closeModal}
     modalStyle={{ background: "#f9f9f9", padding: "20px", width: "400px" }}
     buttonStyle={{ color: "red", fontSize: "24px" }}
   >
     <h2>Custom Styled Modal</h2>
     <p>This modal has custom styles!</p>
   </Modal>
   ```

---

## 📚 API Reference

### `useModal()`

**Returns:**

```ts
[
  isOpen: boolean,      // Whether modal is open
  openModal: () => void,// Function to open modal
  closeModal: () => void// Function to close modal
]
```