Use WASM FLATE as a custom React hook

Powered by

Install

npm i react-compressed-local-storage

Use

Example

Check out https://github.com/drbh/react-compressed-local-storage for a full React example

Using the hook is easy! Just use useCompressedLocalStorageState in place of setState

import React from "react";
import useCompressedLocalStorageState from "react-compressed-local-storage";

export default function Counter() {
  const [count, setCount] = useCompressedLocalStorageState(
    "counter",
    999999999999999
  );
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>{count}</button>
    </div>
  );
}

Benefit

Lets say we click the button above a few times and the counter is 1000000000000003,

uncompressed

1000000000000003 == 16 bytes

compressed

1000000000000003 == MzRAAcYA
MzRAAcYA == 8 bytes

Thats 50% of the original size, in this case we half the amount of localstorage needed 🎉