react-autosave

An automagic component or hook to auto save controlled form values as they are updated.

react-autosave is an extremely lightweight component or hook that periodically triggers a callback function if, and only if, the value to update has changed. Typically, this is used to make API calls when a user stops typing for a second in some input, but you could technically use this for any side effect you wanted to debounce. 🎉

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

Prop	Type	Description
data	TData	The controlled form value to be auto saved
onSave	(data: TData) => any	The callback function to save your data
interval (optional)	number	The number of milliseconds between save attempts. Defaults to 2000
saveOnUnmount (optional)	boolean	Defaults to true. Set to false to prevent saving on unmount

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