Reastorage

introduction

This library will help you use local & session storage in your application. It provides a global state management for local or session storage, utils for Object, Array. And also provides text compression to store more data in your storage!

apis

reastorage

This is a function that provides global access to local or session storage.

parameters

• key
  • Required string
  • Must be unique to prevent unintended data overwrite.
• initialValue
  • Required T
  • Initial value of the storage. If data has not found in storage, it will be set to this value.
• options
  • storage
    • Optional 'local' | 'session'
    • Default is local
    • This will determine which storage to use.
  • compress
    • Optional 'default' | 'utf-16' | false
    • Default is default
    • use lz-string to compress data.
    • This will determine the strategy of compression.
      • 'default': use invalid utf-16 to compress data. this will only work in webkit browsers(Android, Chrome, Safari).
      • 'utf-16': use utf-16 to compress the data. this will work on every browsers, but slightly larger then default.
      • false: do not compress the data.
    • for more information, please refer to lz-string

Example

const example = reastorage('example', 'initialValue');
example.get(); // 'initialValue'
example.set('newValue');
example.get(); // 'newValue'

useReastorage

This hook lets you use global storage in your application. It will return as the same type as useState hook from react

parameters

• storage
  • Required Reastorage
  • Instance of Reastorage

Example

const example = reastorage('example', 0);

function ExampleComponent() {
  const [exampleValue, setExampleValue] = useReastorage(example);
  return (
    <div>
      <button onClick={() => setExampleValue(example + 1)}>
        increment
      </button>
      <p>{exampleValue}</p>
    </div>
  );
}

useReastorageValue

If you just want to subscribe value of the Reastorage, this hook will help you.

parameters

• storage
  • Required Reastorage
  • Instance of Reastorage

Example

const example = reastorage('example', 0);

function ExampleComponent() {
  const exampleValue = useReastorageValue(example);
  return (
    <div>
      <p>{exampleValue}</p>
    </div>
  );
}

useSetReastorage

If you just want to update value of the Reastorage, this hook will help you.

parameters

• storage
  • Required Reastorage
  • Instance of Reastorage

Example

const example = reastorage('example', 0);

function ExampleComponent() {
  const setExampleValue = useSetReastorage(example);
  return (
    <div>
      <button onClick={() => setExampleValue(prev => prev + 1)}>
        increment
      </button>
    </div>
  );
}

useResetReastorage

If you just want to reset value of the Reastorage to initialValue, this hook will help you.

parameters

• storage
  • Required Reastorage
  • Instance of Reastorage

Example

const example = reastorage('example', 0);

function ExampleComponent() {
  const resetExampleValue = useResetReastorage(example);
  return (
    <div>
      <button onClick={() => resetExampleValue()}>
        reset
      </button>
    </div>
  );
}