Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/penseapp/uselocalstorage
A react hook to use the useState with localStorage persistence
https://github.com/penseapp/uselocalstorage
hooks localstorage react usestate
Last synced: 1 day ago
JSON representation
A react hook to use the useState with localStorage persistence
- Host: GitHub
- URL: https://github.com/penseapp/uselocalstorage
- Owner: penseapp
- License: mit
- Created: 2021-02-28T02:17:32.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-03-05T21:40:37.000Z (over 1 year ago)
- Last Synced: 2024-10-14T04:46:01.426Z (26 days ago)
- Topics: hooks, localstorage, react, usestate
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@penseapp/uselocalstorage
- Size: 12.9 MB
- Stars: 3
- Watchers: 4
- Forks: 0
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# useLocalStorage
[](https://badge.fury.io/js/%40penseapp%2Fuselocalstorage)
[](https://img.shields.io/github/v/tag/penseapp/uselocalstorage)
[](https://img.shields.io/github/license/penseapp/uselocalstorage)
[](https://img.shields.io/github/issues/penseapp/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
```tsx
import { useLocalStorage } from "@penseapp/uselocalstorage";
const [state, setState] = useLocalStorage(
"keyName",
"useLocalStorage",
false // or a number
);
```
## How to install
```sh
yarn add @penseapp/uselocalstorage
```
or
```sh
npm i @penseapp/uselocalstorage
```
## How to use
Import the lib on your component
```tsx
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
```diff
import React, { useState } from "react";
import { useLocalStorage } from "@penseapp/uselocalstorage";
const App: React.FC = () => {
- const [state, setstate] = useState(false);
+ const [state, setstate] = useLocalStorage('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](https://www.npmjs.com/package/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**
```tsx
// Never expires (infinite)
const [state, setstate] = useLocalStorage('keyName', 'defaultValue', false);
// Expires in 1 minute
const [state, setstate] = useLocalStorage('keyName', 'defaultValue', 60);
// Expires in 1 hour
const [state, setstate] = useLocalStorage('keyName', 'defaultValue', 60 * 60 * 1); // 3600 seconds
// Expires in 12 hours
const [state, setstate] = useLocalStorage('keyName', 'defaultValue', 60 * 60 * 12); // 43200 seconds
```