📖 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.