@penseapp/uselocalstorage
v1.0.24
Published
A react hooks to use useState with localStorage persist
Downloads
84
Maintainers
Readme
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