@aytacmalkoc/react-use-storage

react-use-storage

The react-use-storage package makes it easy to store data from API services with localStorage.

Table of contents

• react-use-storage
  • Motivation
  • Installation
  • Usage
  • Parameters
  • Encryption
  • Formatting
    • Lint
    • Watch changes
    • Format Document
  • Build & Publish
    • Build
    • Publish
  • License

Motivation

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.

Installation

yarn add @aytacmallkoc/react-use-storage

or

npm install @aytacmalkoc/react-use-storage

Usage

import { 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);
            });
    }
}, []);

Parameters

Parameter	Type	Required	Description
key	string	yes	Key name to use in localStorage
encrypt	boolean	no	Encrypt data for security. Default false

Encryption

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.

Formatting

Lint

yarn lint

Watch changes

yarn prettier-watch

Format Document

yarn prettier-format

---

Build & Publish

Build

yarn build

Publish

yarn publish

License

MIT license, Copyright (c) Aytac Malkoc. For more information see LICENSE.