@sharma.mukesh/react-dsa-hooks

v1.0.4

Published

5 months ago

DSA and JS logic React hooks

0High
0Medium
0Low

sharma.mukesh

📦 Available Hooks

1. `useLocalStorage`

Persists state in the browser’s localStorage.

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.

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:

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

Update your index.html

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

<!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.

Use the useModal hook in your component

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>
  );
}

Customize your modal styles (optional)

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

<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:

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

📦 Available Hooks

1. useLocalStorage

2. useSessionStorage