2.0.0 • Published 3 months ago
uselocalstoragenextjs v2.0.0
useLocalStorage
This is a library that provides an easy way to manage localStorage, having the possibility to connect changes through different components.
Installing
Using npm:
npm i uselocalstoragenextjs
Import
import { useLocalStorage } from "uselocalstoragenextjs";
Use
const {
value, //Value of element in localStorage
setLocalStorage, //function for modify localStorage
load, //if the value has been loaded or not
} = useLocalStorage({
name: "cart", //name of element in localStorage
defaultValue: [], //defaulValue if element in localStorage if null
parse: (v: any) => {
//function for modify value after get of localStorage
return JSON.parse(v == "" ? "[]" : v);
},
updateValue(oldValue, newValue) {
//function for modify value before set of localStorage
return [...oldValue, newValue];
},
});
Use in multiple components
import { useLocalStorage } from "uselocalstoragenextjs";
import Component from "./component";
const Home = () => {
const { value, setLocalStorage, load } = useLocalStorage({
name: "cart",
defaultValue: [],
parse: (v: any) => {
return JSON.parse(v == "" ? "[]" : v);
},
updateValue(olValue, newValue) {
return [...olValue, newValue];
},
});
return (
<div>
Cart
<div>{JSON.stringify(value)}</div>
<br />
<button
onClick={() => {
setLocalStorage({ p: 1 });
}}
>
Add New Product
</button>
<Component />
</div>
);
};
export default Home;
import { useLocalStorage } from "uselocalstoragenextjs";
export default () => {
const { value, load } = useLocalStorage({
name: "cart",
defaultValue: [],
parse: (v: any) => {
return JSON.parse(v == "" ? "[]" : v);
},
});
return (
<>
{load && (
<>
N Items in Cart
<br />
{value.length}
</>
)}
</>
);
};
Use typescript
//interface of value
interface notification_interface {
type?: "ok" | "error" | "warning";
msg?: string;
}
const {
value, //Value of element in localStorage
setLocalStorage, //function for modify localStorage
load, //if the value has been loaded or not
} = useLocalStorage<notification_interface>({
name: "notification", //name of element in localStorage
defaultValue: {}, //defaulValue if element in localStorage if null
parse: (v: any) => {
//function for modify value after get of localStorage
return JSON.parse(v == "" ? "{}" : v);
},
});
Developer
Email blancofrancisco34@gmail.com
Repositories
2.0.0
3 months ago
1.2.5
10 months ago
1.2.4
10 months ago
1.2.3
10 months ago
1.2.0
1 year ago
1.2.2
1 year ago
1.2.1
1 year ago
1.1.3
2 years ago
1.1.2
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.14
2 years ago
1.0.13
2 years ago
1.0.12
2 years ago
1.0.11
2 years ago
1.0.10
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago