react-smart-form-recovery/README.md

A React hook/component that automatically saves form state locally (per field, with versioning) and restores it across tabs/sessions.

# 🚀 react-smart-form-recovery

A lightweight React hook to **automatically save and restore form state** using `localStorage`.  
Never lose form data again — even if the page reloads or the tab closes.  

---

## 📦 Installation

```bash
npm install react-smart-form-recovery
# or
yarn add react-smart-form-recovery

## 🚀 Example

```jsx
import React from "react";
import { useFormRecovery } from "react-smart-form-recovery";

function Test() {
  // Hook manages form state directly
  const { recoveredForm: form, setForm, resetRecovery } = useFormRecovery(
    "signup-form",
    { name: "", email: "" }
  );

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        minHeight: "100vh",
        background: "linear-gradient(135deg, #6a11cb 0%, #2575fc 100%)",
        fontFamily: "Inter, sans-serif",
      }}
    >
      <div
        style={{
          background: "white",
          padding: "30px",
          borderRadius: "20px",
          boxShadow: "0px 8px 25px rgba(0,0,0,0.1)",
          width: "400px",
          maxWidth: "90%",
        }}
      >
        <h2
          style={{
            textAlign: "center",
            marginBottom: "20px",
            color: "#333",
          }}
        >
          🚀 Smart Form Recovery
        </h2>

        {/* Name Field */}
        <div style={{ marginBottom: "15px" }}>
          <label style={{ display: "block", marginBottom: "6px", color: "#555" }}>
            Full Name
          </label>
          <input
            type="text"
            placeholder="Enter your name"
            value={form.name}
            onChange={(e) => setForm({ ...form, name: e.target.value })}
            style={{
              width: "100%",
              padding: "12px",
              border: "1px solid #ddd",
              borderRadius: "10px",
              outline: "none",
              fontSize: "14px",
              transition: "0.3s",
            }}
          />
        </div>

        {/* Email Field */}
        <div style={{ marginBottom: "15px" }}>
          <label style={{ display: "block", marginBottom: "6px", color: "#555" }}>
            Email Address
          </label>
          <input
            type="email"
            placeholder="Enter your email"
            value={form.email}
            onChange={(e) => setForm({ ...form, email: e.target.value })}
            style={{
              width: "100%",
              padding: "12px",
              border: "1px solid #ddd",
              borderRadius: "10px",
              outline: "none",
              fontSize: "14px",
              transition: "0.3s",
            }}
          />
        </div>

        {/* Clear Button */}
        <button
          onClick={() => resetRecovery()}
          style={{
            width: "100%",
            padding: "12px",
            background: "#2575fc",
            border: "none",
            borderRadius: "10px",
            color: "white",
            fontSize: "16px",
            fontWeight: "600",
            cursor: "pointer",
            transition: "0.3s",
          }}
        >
          Clear Saved Data
        </button>
      </div>
    </div>
  );
}

export default Test;