docs: readme

Author: joaomantovani

README.md

@@ -13,30 +13,29 @@
 <!-- ![GitHub Workflow Status (event)](https://img.shields.io/github/workflow/status/@penseapp/useLocalStorageReducer/test) -->
 <!-- [![Coverage Status](https://coveralls.io/repos/github/penseapp/useLocalStorageReducer/badge.svg?branch=master)](https://coveralls.io/github/penseapp/useLocalStorageReducer?branch=master) -->
 
-<!-- </div> -->!
-[Peek 2021-03-06 15-36](https://user-images.githubusercontent.com/5152197/110217257-d131ed80-7e91-11eb-8f57-cb23404c52d6.gif)
-
+<!-- </div> -->
 
 This is a react hook that allows you to use the power of browser localstorage
-and the useState react hook combined!
+and the useReducer react hook combined!
 
 The API is the same, and you'll see no difference between them!
 
 ## Example live action
 
-![Peek 2021-02-28 17-40](https://user-images.githubusercontent.com/5152197/109432913-444be780-79ec-11eb-87ad-bcc3d1204bb8.gif)
+![Peek 2021-03-06 15-36](https://user-images.githubusercontent.com/5152197/110217257-d131ed80-7e91-11eb-8f57-cb23404c52d6.gif)
 
-You can try this live version on: https://penseapp-useLocalStorageReducer.web.app/
+You can try this live version on: https://penseapp-uselocalstoragereduce.web.app/
 
 ## TL;DR
 
 ```tsx
 import { useLocalStorageReducer } from "@penseapp/useLocalStorageReducer";
 
-const [state, setState] = useLocalStorageReducer<string>(
-  "keyName",
-  "useLocalStorageReducer",
-  false // or a number
+const [stateExample, dispatchExample] = useLocalStorageReducer(
+  "localStorage-key",
+  Reducer,
+  exampleInitialState,
+  60 * 60 // 1 hour
 );
 ```
 
@@ -54,22 +53,25 @@ npm i @penseapp/useLocalStorageReducer
 
 ## How to use
 
-Import the lib on your component
+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 `useState` to `useLocalStorageReducer` on any hooks and it's done.
+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, { useState } from "react";
-import { useLocalStorageReducer } from "@penseapp/useLocalStorageReducer";
+- import React, { useReducer } from "react";
++ import React from "react";
++ import { useLocalStorageReducer } from "@penseapp/useLocalStorageReducer";
 
 const App: React.FC = () => {
--  const [state, setstate] = useState<boolean>(false);
-+  const [state, setstate] = useLocalStorageReducer<boolean>('keyName', false);
+-  const [state, setstate] = useReducer(reducer, initialState);
++  const [state, setstate] = useLocalStorageReducer<boolean>('keyName', reducer, initialState, false);
 
   return (
     <>
@@ -83,11 +85,14 @@ 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)   |
+| 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)            |
+
+<br />
 
 ## localStorage expire
 
@@ -98,34 +103,42 @@ You have two options:
 - Set the time in seconds
 - Set false to infinite
 
+<br />
+
 **Examples**
 
 ```tsx
+import Reducer from "your-reducer";
+
 // Never expires (infinite)
 const [state, setstate] = useLocalStorageReducer<boolean>(
   "keyName",
-  "defaultValue",
+  Reducer,
+  { field1: "example" },
   false
 );
 
 // Expires in 1 minute
 const [state, setstate] = useLocalStorageReducer<boolean>(
   "keyName",
-  "defaultValue",
+  Reducer,
+  { field1: "example" },
   60
 );
 
 // Expires in 1 hour
 const [state, setstate] = useLocalStorageReducer<boolean>(
   "keyName",
-  "defaultValue",
+  Reducer,
+  { field1: "example" },
   60 * 60 * 1
 ); // 3600 seconds
 
 // Expires in 12 hours
 const [state, setstate] = useLocalStorageReducer<boolean>(
   "keyName",
-  "defaultValue",
+  Reducer,
+  { field1: "example" },
   60 * 60 * 12
 ); // 43200 seconds
 ```