react-autosave v0.5.0

react-autosave

Auto save controlled form values as they are updated.

react-autosave is a lightweight solution for auto saving controlled form values. It handles many edge cases and guarantees a good user experience.

Examples

import React from 'react';
import axios from 'axios';

import { Autosave, useAutosave } from 'react-autosave';

const updateBlog = (data) => axios.post('myapi/blog/123', { text: data });

// Via hook
const EditBlogFormWithHook = () => {
  const [blogText, setBlogText] = React.useState('hello world');
  useAutosave({ data: blogText, onSave: updateBlog });
  return (
    <div>
      <input
        type="text"
        value={blogText}
        onChange={(e) => setBlogText(e.target.value)}
      />
    </div>
  );
};

// Via component
const EditBlogForm = () => {
  const [blogText, setBlogText] = React.useState('hello world');
  return (
    <div>
      <input
        type="text"
        value={blogText}
        onChange={(e) => setBlogText(e.target.value)}
      />
      <Autosave data={blogText} onSave={updateBlog} />
    </div>
  );
};

Installation

yarn add react-autosave

# or with npm...
npm i react-autosave

Features

1. Written in typescript.

2. Lightweight and simple.

3. No dependencies.

API

Contributing

Issues and PRs are more than welcome. Please clone the repo and setup your environment with:

pnpm

The test suite can be run with pnpm test Buid the library with pnpm build A demo page can be viewed with pnpm build && pnpm dev