useLocalStorage

This is a react hook that allows you to use the power of browser localstorage and the useState react hook combined!

The API is the same, and you'll see no difference between them!

Example live action

You can try this live version on: https://penseapp-uselocalstorage.web.app/

TL;DR

import { useLocalStorage } from "@penseapp/uselocalstorage";

const [state, setState] = useLocalStorage<string>(
  "keyName",
  "useLocalStorage",
  false // or a number
);

How to install

yarn add @penseapp/uselocalstorage

or

npm i @penseapp/uselocalstorage

How to use

Import the lib on your component

import { useLocalStorage } from "@penseapp/uselocalstorage";

Simple change the useState to useLocalStorage on any hooks and it's done. Now you can reload your browser and your state will maintein

import React, { useState } from "react";
import { useLocalStorage } from "@penseapp/uselocalstorage";

const App: React.FC = () => {
-  const [state, setstate] = useState<boolean>(false);
+  const [state, setstate] = useLocalStorage<boolean>('keyName', false);

  return (
    <>
      Your React component...
    </>
  );
};

export default App;

API / Props

Name	Type	Required	Default	Description
key	string	true		Key name from localStorage (Should be unique)
initialValue	any (Generic)	true		Same as the useState hook
expire	number or false	false	60 * 30 (seconds)	Time in seconds to expiry (false to infinite)

localStorage expire

This lib use as dependecy the expired-storage, so you can controll your state by how much time it should persist on localStorage

You have two options:

• Set the time in seconds
• Set false to infinite

Examples

// Never expires (infinite)
const [state, setstate] = useLocalStorage<boolean>('keyName', 'defaultValue', false);


// Expires in 1 minute
const [state, setstate] = useLocalStorage<boolean>('keyName', 'defaultValue', 60);


// Expires in 1 hour
const [state, setstate] = useLocalStorage<boolean>('keyName', 'defaultValue', 60 * 60 * 1); // 3600 seconds


// Expires in 12 hours
const [state, setstate] = useLocalStorage<boolean>('keyName', 'defaultValue', 60 * 60 * 12); // 43200 seconds