@satha/core NPM

Satha

An easy to use localStorage wrapper inspired by state management systems.

Satha साठा is a Marathi word for "Storage" or "to store"

https://satha.netlify.app/

Getting started

Install

// npm
npm i @satha/core

// pnpm
pnpm add @satha/core

Create a store

import { useStorage } from '@satha/core';

const numberSave = useStorage('number-save', 1);

Use store

// get value
const number = numberSave.get();

// set value
numberSave.set((state) => state + 1);

Recipes

Create and use store

create a store which stores a numeric value

import { useStorage } from '@satha/core';
const numberSave = useStorage('number-save', 1);

// get value
const number = numberSave.get();

console.log(number);

Multi value store

create an user details store packed in object

import { useStorage } from '@satha/core';

// user info
const userInfoStore = useStorage('userInfo', {
  name: 'S. Dogg',
  age: 40,
  birthPalce: 'LA',
});

// get value
const { name } = userInfoStore.get();

// log value
console.log(name);

Set value

import { useStorage } from '@satha/core';

// user info
const userInfoStore = useStorage('userInfo', {
  name: 'S. Dogg',
  age: 40,
  birthPalce: 'LA',
});

// change age
userInfoStore.set((state) => {
  state.age = 50;
  return state;
});

// get value
const { age } = userInfoStore.get();

// log value
console.log(age);

Subscribe/Unsubscribe 🎉

import { useStorage } from '@satha/core';
const numberSave = useStorage('number-save', 1);

// initial value
let numberValue = numberSave.get();

// subscribe
const subscribe = numberSave.subscribe((state) => {
  // update value
  numberValue = state;
});

// action to set data: can be used as onClick event
const handleSetData = () => {
  // subscribe callback will be triggered after this action
  numberSave.set((state) => state + 1);
};

// optional: unsubscribe on unmount
numberSave.unsubscribe(subscribe);

Reset value

import { useStorage } from '@satha/core';
const numberSave = useStorage('number-save', 1);

// will reset value to initial state
numberSave.reset();

sessionStorage

import { useStorage } from '@satha/core';
const numberSave = useStorage('number-save', 1);

// will reset value to initial state
numberSave.reset();

New localStorage

import { createLocalStorage, useStorage } from '@satha/core';

const storageNumber = createLocalStorage('storage-number');

const numberSave = useStorage('number-save', 1, ...storageNumber);

New SessionStorage

import { createSessionStorage, useStorage } from '@satha/core';

const sessionStorageNumber = createSessionStorage('session-number');

const numberSave = useStorage('number-save', 1, ...sessionStorageNumber);

Default storage name

import { createLocalStorage, createSessionStorage } from '@satha/core';

// localStorage
createLocalStorage('satha-main-storage', { defaultStorage: true });

// sessionStorage
createSessionStorage('satha-main-storage', { defaultStorage: true });

Sub link hack

If you are using sub links e.g. github pages then there is a posibility of local storage conflict. Use the following hack to avoid it.

import { createLocalStorage } from '@satha/core';

// use unique name for each site
createLocalStorage('satha-store-001', { defaultStorage: true });

// after this useStorage can be used

API

useStorage

// Props
useStorage(
  name: String [required];
  state: any;

  // extra Props
  type: 'local' [default] | 'session';
  storageName: String;
);

// Methods
const store = useStorage('store', 0);

store.get(); // value: 0

store.set(state => state + 1); // value: 1

store.reset(); // value: 0

store.subscribe((state) => {
  // do your thing
}); // will return a unique id

store.unsubscribe(subscribe); // use subscribe id

store.unsubscribeAll();

createLocalStorage

// * same is applicable for createSessionStorage
// Props
createLocalStorage(
  storageName: String [required];
  // extra options
  config: {
    defaultStorage: Bool = false;
  };
);

// output: [type, storageName]