useLocalStorage

This is a library that provides an easy way to manage localStorage, having the possibility to connect changes through different components.

- Installing
- Import
- Use
- Use in multiple components
- Developer
- Repositories

Installing

Using npm:

``bash
npm i uselocalstoragenextjs
`

Import

`javascript
import { useLocalStorage } from "uselocalstoragenextjs";
`

Use

`javascript
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];
},
});
`

$3

`javascript
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 (


export default Home;
`

`javascript
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


{value.length}

)}

);
};
`

Use typescript

`ts
//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({
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

Francisco Blanco

Github franciscoblancojn

Email blancofrancisco34@gmail.com

Repositories

- Github