# use-web-storage-api

> Simple react hooks to use the Web Storage API (https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API)

Latest version **1.0.11** (published 2024-02-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-web-storage-api
pnpm add use-web-storage-api
yarn add use-web-storage-api
bun add use-web-storage-api
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.11 |
| Published | 2024-02-02 |
| First published | 2022-04-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 13.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Andrei Dimitrascu |
| Maintainers | rast999 |
| Keywords | react, hooks |

## Links

- npm: https://www.npmjs.com/package/use-web-storage-api
- Repository: https://github.com/AndreiD049/use-web-storage-api
- Homepage: https://github.com/AndreiD049/use-web-storage-api#readme
- Issues: https://github.com/AndreiD049/use-web-storage-api/issues
- npm.io page: https://npm.io/package/use-web-storage-api

## 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.11 (latest) — 2024-02-02
- 1.0.10 — 2024-02-02
- 1.0.9 — 2024-02-02
- 1.0.8 — 2023-03-25
- 1.0.7 — 2023-03-25
- 1.0.6 — 2022-09-03
- 1.0.5 — 2022-09-03
- 1.0.4 — 2022-09-03
- 1.0.3 — 2022-04-04
- 1.0.2 — 2022-04-03
- 1.0.1 — 2022-04-03
- 1.0.0 — 2022-04-03

## README

# use-web-storage-api
Simple react hook that saves the value to Web Storage

# Install:

```bash
npm i use-web-storage-api
```

# Usage:

By default, the hook looks very similar to `useState`, except that it receives an additional argument, `options`.

Here is the default usage:

```typescript
import useWebStorage from 'use-web-storage-api';

const MyComponent: React.FC = () => {
    const [name, setName] = useWebStorage('Bob', {
        key: 'NAME', // key of the value in local/session storge
    });

    // When button is clicked, the value in storage will change to 'John'
    return (
        <div>
            <h3>{name}</h3>
            <button onClick={() => setName('John')}>Change name</button>
        </div>}
    );
}
```

Options can have following keys:

```ts
export interface IUseWebStorageOptions<T> {
    // The key under which the value will be stored
    key: string;
    // Storage type, default local
    storageType?: 'local' | 'session';
    // Serialization function: default JSON.stringify
    serialize?: (val: T) => string;
    // Deserialization function: default just returns the string or calls JSON.parse for objects
    deserialize?: (val: string) => T;
    // Number of milliseconds to expiration. Default doesn't expire
    expiresIn?: number;
}
```

# Example

If you have a `Date` value to be stored in the localstorage for max 8 hours, it could be achieved like this:

```ts
import useWebStorage from 'use-web-storage-api';

const MINUTE = 1000 * 60;
const HOUR = MINUTE * 60;

const MyComponent: React.FC = () => {
    const [date, setDate] = useWebStorage(new Date(), {
        key: 'DATE', 
        serialize: (dt) => dt.toISOString(),
        deserialize: (dtStr) => new Date(dtStr),
        expiresIn: HOUR * 8,
    });

    // When button is clicked, the value in storage will change to 'John'
    return (
        <div>
            <h3>{date.toISOString()}</h3>
            <button onClick={() => setDate(new Date())}>Change name</button>
        </div>}
    );
}
```

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