React Form Saver

A lightweight React hook to automatically save and restore form drafts using localStorage or sessionStorage.
Never lose your form progress again! 🚀

Installation

npm install react-form-saver

Usage

import { useFormSaver } from "react-form-saver";

function BlogEditor() {
    const { values, handleChange, resetForm } = useFormSaver(
        "blog-draft",
        { title: "", content: "" }
    );

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log("Submitted:", values);
        resetForm(); // Clear the saved draft
    };

    return (
        <form onSubmit={handleSubmit}>
            <input
                name="title"
                value={values.title}
                onChange={handleChange}
                placeholder="Blog Title"
            />
            <textarea
                name="content"
                value={values.content}
                onChange={handleChange}
                placeholder="Write something..."
            />
            <button type="submit">Publish</button>
        </form>
    );
}

Options

useFormSaver(key, initialValues, options)

• key (string): Unique key for storage.
• initialValues (object): Initial form values.
• options (object, optional):
  • storage: localStorage or sessionStorage (default: localStorage)
  • interval: How often to save (in ms, default: 1000)