https://github.com/penseapp/uselocalstoragereducer
A react hook to use the useReducer with localStorage persistence
https://github.com/penseapp/uselocalstoragereducer
hooks localstorage npm react usereducer usereducer-hooks
Last synced: 10 months ago
JSON representation
A react hook to use the useReducer with localStorage persistence
- Host: GitHub
- URL: https://github.com/penseapp/uselocalstoragereducer
- Owner: penseapp
- License: mit
- Created: 2021-03-06T17:47:23.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T06:08:55.000Z (over 3 years ago)
- Last Synced: 2025-08-15T13:18:40.759Z (10 months ago)
- Topics: hooks, localstorage, npm, react, usereducer, usereducer-hooks
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@penseapp/uselocalstoragereducer
- Size: 5.81 MB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# useLocalStorageReducer
[](https://badge.fury.io/js/%40penseapp%2FuseLocalStorageReducer)
[](https://img.shields.io/github/v/tag/penseapp/useLocalStorageReducer)
[](https://img.shields.io/github/license/penseapp/useLocalStorageReducer)
[](https://img.shields.io/github/issues/penseapp/useLocalStorageReducer)
A react hook that allows you to use the power of browser localstorage
and the useReducer 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-uselocalstoragereduce.web.app/
## TL;DR
```tsx
import { useLocalStorageReducer } from "@penseapp/useLocalStorageReducer";
export interface ExampleContextInterface {
field1: string;
}
export type ExampleAction = UPDATE_STATE; // Your reducers used in switch
const [stateExample, dispatchExample] = useLocalStorageReducer<
ExampleContextInterface,
ExampleAction
>(
"localStorage-key",
Reducer,
exampleInitialState,
60 * 60 // 1 hour
);
```
## How to install
```sh
yarn add @penseapp/uselocalstoragereducer
```
or
```sh
npm i @penseapp/uselocalstoragereducer
```
## How to use
You need to implement the reducer/provider on your side. If you want a suggestion to
organize the useLocalStorageReducer, please check the files inside the folder
`playground/src/ExampleContext`. And look at the file `ExampleContext.tsx`
```tsx
import { useLocalStorageReducer } from "@penseapp/useLocalStorageReducer";
```
Simple change the `useReducer` to `useLocalStorageReducer` on any hooks and it's done.
Now you can reload your browser and your state will maintein
```diff
- import React, { useReducer } from "react";
+ import React from "react";
+ import { useLocalStorageReducer } from "@penseapp/useLocalStorageReducer";
const App: React.FC = () => {
- const [state, setstate] = useReducer(reducer, initialState);
+ const [state, setstate] = useLocalStorageReducer('keyName', reducer, initialState, false);
// I: Your object
// A: Your action
return (
<>
Your React component...
>
);
};
export default App;
```
## API / Props
| Name | Type | Required | Default | Description |
| ------------ | --------------- | -------- | ------------------ | -------------------------------------------------------- |
| key | string | true | | Key name from `localStorage` (Should be unique) |
| reducer | React Reducer | true | | https://reactjs.org/docs/hooks-reference.html#usereducer |
| initialValue | any (Generic) | true | | Same as the `useReducer` 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
import Reducer from "your-reducer";
// Never expires (infinite)
const [state, setstate] = useLocalStorageReducer(
"keyName",
Reducer,
{ field1: "example" },
false
);
// Expires in 1 minute
const [state, setstate] = useLocalStorageReducer(
"keyName",
Reducer,
{ field1: "example" },
60
);
// Expires in 1 hour
const [state, setstate] = useLocalStorageReducer(
"keyName",
Reducer,
{ field1: "example" },
60 * 60 * 1
); // 3600 seconds
// Expires in 12 hours
const [state, setstate] = useLocalStorageReducer(
"keyName",
Reducer,
{ field1: "example" },
60 * 60 * 12
); // 43200 seconds
```
## Running local
Git clone this repository
```shell
git clone git@github.com:penseapp/useLocalStorageReducer.git
```
Go to repository folder
```shell
cd useLocalStorageReducer
```
Install and start playground repository
```shell
yarn && yarn install:playground && yarn start:playground
```