@vicary/use-localforage v0.1.0

Installation

npm install uselocalforage

Usage

Step 1. Add the provider in your app.

import React from "react";
import App from "./App";
import { LocalForageProvider } from "uselocalforage";

export default () => (
  <LocalForageProvider>
    <App />
  </LocalForageProvider>
);

Step 2. Use the hook

It has a similar API as useState, with an additional storage key.

import { useLocalForage } from "uselocalforage";

const PageComponent = () => {
  const [user, setUser] = useLocalForage("user", { guest: true });

  return <>Current user: {user.guest ? "guest" : user.id}</>;
};

Because of the asynchronous behavior of localforage, returned value will fallback to defaultValue before the promise is resolved.

If the application requires explicit knowledge of the loading state, there is a third item in the returned array as a boolean to indicate a loading state.

const [user, setUser, loading] = useLocalForage("user", { guest: true });