New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

use-local-storage-state

Package Overview
Dependencies
Maintainers
1
Versions
83
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

use-local-storage-state - npm Package Compare versions

Comparing version

1.1.3
to
2.0.0

2

dist/index.d.ts
import { Dispatch, SetStateAction } from 'react';
export default function useLocalStorageState<T>(key: string, defaultValue?: T): [T, Dispatch<SetStateAction<T>>];
export declare function createLocalStorageStateHook<T>(name: string, defaultValue?: T): () => [T, Dispatch<SetStateAction<T>>];
export declare function createLocalStorageStateHook<T>(key: string, defaultValue?: T): () => [T, Dispatch<SetStateAction<T>>];

20

dist/index.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("react");
const initializedStorageKeys = new Set();
function useLocalStorageState(key, defaultValue) {

@@ -18,2 +19,14 @@ const [value, setValue] = react_1.useState(() => {

react_1.useLayoutEffect(() => {
if (initializedStorageKeys.has(key)) {
throw new Error(`Multiple instances of useLocalStorageState() initialized with the same key. ` +
`Use createLocalStorageStateHook() instead. ` +
`Look at the example here: ` +
`https://github.com/astoilkov/use-local-storage-state#create-local-storage-state-hook-example`);
}
else {
initializedStorageKeys.add(key);
}
return () => void initializedStorageKeys.delete(key);
}, []);
react_1.useLayoutEffect(() => {
const onStorage = (e) => {

@@ -30,6 +43,6 @@ if (e.storageArea === localStorage && e.key === key) {

exports.default = useLocalStorageState;
function createLocalStorageStateHook(name, defaultValue) {
function createLocalStorageStateHook(key, defaultValue) {
const updates = [];
return function useLocalStorageStateHook() {
const [value, setValue] = useLocalStorageState(name, defaultValue);
const [value, setValue] = useLocalStorageState(key, defaultValue);
const updateValue = react_1.useCallback((newValue) => {

@@ -41,2 +54,5 @@ for (const update of updates) {

react_1.useLayoutEffect(() => {
initializedStorageKeys.delete(key);
}, []);
react_1.useLayoutEffect(() => {
updates.push(setValue);

@@ -43,0 +59,0 @@ return () => void updates.splice(updates.indexOf(setValue), 1);

4

package.json
{
"name": "use-local-storage-state",
"version": "1.1.3",
"version": "2.0.0",
"description": "React hook for local storage state done right",

@@ -30,3 +30,3 @@ "license": "MIT",

"build": "tsc",
"test": "jest --coverage --coverageReporters=text",
"test": "yarn run build && jest --coverage --coverageReporters=text",
"release": "yarn run build && np",

@@ -33,0 +33,0 @@ "prettier": "prettier --write --config .prettierrc.toml '{**/*.ts}'"

10

readme.md

@@ -5,6 +5,6 @@ # `use-local-storage-state`

![](https://img.shields.io/travis/com/astoilkov/use-local-storage-state)
![](https://img.shields.io/codeclimate/coverage/astoilkov/use-local-storage-state)
![](https://img.shields.io/bundlephobia/min/use-local-storage-state)
![](https://img.shields.io/david/astoilkov/use-local-storage-state)
[![Build Status](https://travis-ci.org/astoilkov/use-local-storage-state.svg?branch=master)](https://travis-ci.org/astoilkov/use-local-storage-state)
[![Test Coverage](https://api.codeclimate.com/v1/badges/38dfdf48f7f326ccfa8e/test_coverage)](https://codeclimate.com/github/astoilkov/use-local-storage-state/test_coverage)
[![Minified Size](https://badgen.net/bundlephobia/min/use-local-storage-state)](https://bundlephobia.com/result?p=use-local-storage-state)
![Dependencies](https://david-dm.org/astoilkov/use-local-storage-state.svg)

@@ -62,2 +62,4 @@ ## Install

<div id="create-local-storage-state-hook-example"></div>
Using the same hook in multiple places:

@@ -64,0 +66,0 @@ ```typescript