The react-use-storage package makes it easy to store data from API services with localStorage.
I had the problem that this package solves while developing my personal web page. I wanted to list my personal repository on my web page using Github REST API service. I wanted to write a function using the localStorage property to be able to do it without any authenticate and rate limits. When I saw that I could use this function in more than one project, I created it as a small package and published it.
yarn add @aytacmallkoc/react-use-storageor
npm install @aytacmalkoc/react-use-storageimport { useStorage } from '@aytacmalkoc/react-use-storage';
const [posts, setPosts] = useState([]);
const [storage, setStorage] = useStorage('posts');
useEffect(() => {
if (storage) {
setPosts(storage);
} else {
// fetch data from server
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => {
setPosts(data);
setStorage(data);
});
}
}, []);| Parameter | Type | Required | Description |
|---|---|---|---|
| key | string | yes | Key name to use in localStorage |
| encrypt | boolean | no | Encrypt data for security. Default false |
react-use-storage does not encrypt data by default. The second parameter must be true to encrypt the data.
crypto-js package and AES algorithm are used when encrypting data.
yarn lintyarn prettier-watchyarn prettier-formatyarn buildyarn publishMIT license, Copyright (c) Aytac Malkoc. For more information see LICENSE.