# @aytacmalkoc/react-use-storage

> Basic storage management for React applications using localStorage & hooks.

Latest version **1.0.4** (published 2022-07-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @aytacmalkoc/react-use-storage
pnpm add @aytacmalkoc/react-use-storage
yarn add @aytacmalkoc/react-use-storage
bun add @aytacmalkoc/react-use-storage
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2022-07-13 |
| First published | 2022-07-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 7.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Aytac Malkoc |
| Maintainers | aytacmalkoc |
| Keywords | react, use-storage, react hooks, react-cache |

## Links

- npm: https://www.npmjs.com/package/@aytacmalkoc/react-use-storage
- Repository: https://github.com/aytacmalkoc/react-use-storage
- Homepage: https://github.com/aytacmalkoc/react-use-storage#readme
- Issues: https://github.com/aytacmalkoc/react-use-storage/issues
- npm.io page: https://npm.io/package/@aytacmalkoc/react-use-storage

## Dependencies (2)

- [crypto-js](https://npm.io/package/crypto-js.md) ^4.1.1
- [@types/crypto-js](https://npm.io/package/@types/crypto-js.md) ^4.1.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2022-07-13
- 1.0.3 — 2022-07-13
- 1.0.2 — 2022-07-13
- 1.0.0 — 2022-07-13

## README

# 📖 react-use-storage

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

[![npm downloads](https://img.shields.io/npm/dt/@aytacmalkoc/react-use-storage)](https://www.npmjs.com/package/@aytacmalkoc/react-use-storage)
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/aytacmalkoc/react-use-storage/blob/main/LICENSE)

# Table of contents

- [📖 react-use-storage](#-react-use-storage)
  - [🙇‍♂️ Motivation](#-motivation)
  - [🔗 Installation](#-installation)
  - [👉 Usage](#-usage)
  - [Parameters](#parameters)
  - [🔑 Encryption](#-encryption)
  - [Formatting](#formatting)
    - [📝 Lint](#-lint)
    - [👀 Watch changes](#-watch-changes)
    - [✒️ Format Document](#-format-document)
  - [🚀 Build & Publish](#-build--publish)
    - [Build](#build)
    - [Publish](#publish)
  - [💁 License](#-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

```bash
yarn add @aytacmallkoc/react-use-storage
```
or

```bash
npm install @aytacmalkoc/react-use-storage
```

## 👉 Usage

```js
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](https://www.npmjs.com/package/crypto-js) package and [AES](https://en.wikipedia.org/wiki/Advanced_Encryption_Standard) algorithm are used when encrypting data.


## Formatting

### 📝 Lint

```bash
yarn lint
```

### 👀 Watch changes

```bash
yarn prettier-watch
```

### ✒️ Format Document

```bash
yarn prettier-format
```
---

## 🚀 Build & Publish


### Build

```bash
yarn build
```
### Publish
```bash
yarn publish
```

## 💁 License
MIT license, Copyright (c) Aytac Malkoc. For more information see [LICENSE](https://github.com/aytacmalkoc/react-use-storage/blob/main/LICENSE).

---
_Source: https://npm.io/package/@aytacmalkoc/react-use-storage · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._