Package Exports

uselocalstoragenextjs
uselocalstoragenextjs/dist/cjs/index.js
uselocalstoragenextjs/dist/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (uselocalstoragenextjs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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:

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

Francisco Blanco

Github franciscoblancojn

Email blancofrancisco34@gmail.com

Repositories

Github