1.2.0-beta.2 • Published 4 years ago

react-localstorage-ts v1.2.0-beta.2

Weekly downloads
177
License
MIT
Repository
github
Last release
4 years ago

release

#react-localstorage-ts

A small library to wrap browser's localstorage in a functional fashion.

react-localstorage-ts act as a small layer over the browser's localstorage and fallbacks to an in-memory store is the browser does not support it.
Build over io-ts and fp-ts, react-localstorage-ts gives you a standard way to access objects stored in your localStorage using io-ts's encoding/decoding abilities.

first you have to define the list of "storable" items by expanding the StoredItems interface:

// store.ts
import * as t from "io-ts"
export const ThemeFlavour = t.union([t.literal("light"), t.literal("dark")])
export type ThemeFlavour = t.TypeOf<typeof ThemeFlavour>

declare module "react-localstorage-ts" {
    interface StoredItems {
        access_token: string
        theme: ThemeFlavour
    }
}

then you create the hooks fot the defined values:

// localHooks.ts
import * as t from "io-ts"
import {
  makeDefaultedUseLocalItem,
  makeUseLocalItem,
} from "react-localstorage-ts"
import {ThemeFlavour} from "./store"

export const useThemeFlavour = makeDefaultedUseLocalItem("theme", ThemeFlavour, () => "light")
export const useAccessToken = makeUseLocalItem("access_token", t.string)

then you can freely use them in your react components:

// App.tsx
import * as React from "react"
import * as E from "fp-ts/Either"
import LightThemeApp from "./components/LightThemeApp"
import DarkThemeApp from "./components/DarkThemeApp"
import { useThemeFlavour } from "./localHooks"

const App: React.FC = () => {
  const [theme, setTheme] = useThemeFlavour()
  
  return pipe(
    theme,
    E.fold(
      () => {
        console.error('wrong value stored in localStorage!')
      },
      themeFlavour => {
        switch (themeFlavour) {
          case "light": {
            return <LightThemeApp />
          }
          case "dark": {
            return <DarkThemeApp />
          }
        }
      }
    )
  )
}

export default App

##contributing to commit to this repository there are a few rules:

  • your commits must follow the conventional commit standard (it should be enforced by husky commit-msg hook).
  • your code must be formatted using prettier.
  • all tests must pass.

here is the release flow explained

2.3.2

3 years ago

2.3.1

3 years ago

2.3.0

4 years ago

2.2.0

4 years ago

2.1.0

4 years ago

2.0.0

4 years ago

2.0.0-beta.17

4 years ago

2.0.0-beta.15

4 years ago

2.0.0-beta.14

4 years ago

2.0.0-beta.16

4 years ago

2.0.0-beta.9

4 years ago

2.0.0-beta.8

4 years ago

2.0.0-beta.7

4 years ago

1.2.8

4 years ago

2.0.0-beta.2

4 years ago

2.0.0-beta.6

4 years ago

2.0.0-beta.5

4 years ago

2.0.0-beta.4

4 years ago

2.0.0-beta.3

4 years ago

2.0.0-beta.11

4 years ago

2.0.0-beta.10

4 years ago

1.2.9

4 years ago

2.0.0-beta.13

4 years ago

1.2.10

4 years ago

2.0.0-beta.12

4 years ago

2.0.0-beta.1

4 years ago

1.2.7

4 years ago

1.2.6

4 years ago

1.2.5

4 years ago

1.2.4

4 years ago

1.2.0

4 years ago

1.1.1

4 years ago

1.0.2

4 years ago

1.1.0

4 years ago

1.2.3

4 years ago

1.2.2

4 years ago

1.0.4

4 years ago

1.2.1

4 years ago

1.1.2

4 years ago

1.0.3

4 years ago

1.2.0-beta.1

4 years ago

1.2.0-beta.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago