https://github.com/jollyjerr/react-autosave
Component or hook to auto save controlled form values as they are updated
https://github.com/jollyjerr/react-autosave
autosave forms react
Last synced: 4 months ago
JSON representation
Component or hook to auto save controlled form values as they are updated
- Host: GitHub
- URL: https://github.com/jollyjerr/react-autosave
- Owner: jollyjerr
- License: mit
- Created: 2020-11-05T00:37:52.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-01-31T12:13:40.000Z (about 1 year ago)
- Last Synced: 2024-10-16T01:31:47.970Z (6 months ago)
- Topics: autosave, forms, react
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-autosave
- Size: 49.8 MB
- Stars: 65
- Watchers: 3
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# react-autosave
[](https://codecov.io/gh/jollyjerr/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
```tsx
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 (
setBlogText(e.target.value)}
/>
);
};
// Via component
const EditBlogForm = () => {
const [blogText, setBlogText] = React.useState('hello world');
return (
setBlogText(e.target.value)}
/>
);
};
```
## Installation
```sh
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:
```sh
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`