// npm
npm i @satha/core
// pnpm
pnpm add @satha/core
Satha
A tiny, reactive, easy to use, wrapper for localStorage.
import { createStore } from '@satha/core';
const numberStore = createStore('number-save', 1);
// get value
const number = numberSave.get();
// set value
numberSave.set((state) => state + 1);
create a store which stores a numeric value
import { createStore } from '@satha/core';
const numberStore = createStore('number-save', 1);
// get value
const number = numberSave.get();
console.log(number)
// set value
numberSave.set((state) => state + 1);
Create dynamic stores using Subscribe/Unsubscribe methods. Subscription is global and will work througout the page.
...
const numberSave = createStore('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)
create an user details store packed in object
...
// user info
const userInfoStore = createStore('userInfo', {
name: 'S. Dogg',
age: 40,
birthPalce: 'LA'
});
// get value
const { name } = userInfoStore.get();
// log value
console.log(name);
// change age
userInfoStore.set(state => {
state.age = 50;
return state;
})
// get value
const { age } = userInfoStore.get();
// log value
console.log(age);
Reset value to initial state
...
numberSave.reset();
Create session storage (sessionStorage)
...
const numberSave = createStore('number-save', 1, {
storageType: 'session',
});
by default all stores are grouped under a single localStorage array. The values can be stored in a diffrent localStorage array by specifying 'storageName'
...
const numberSave = useStorage('number-save', 1, {
storageName: 'alt-storage',
});
by default all stores are grouped under a single localStorage array. You can customize the name of this default storage entry by calling 'setDefaultStorageName' before initializing any stores.
[It's useful If you are using sub links e.g. github pages to avoid the possibility of local storage name conflict.]
import {
setDefaultStorageName,
} from '@satha/core';
setDefaultStorageName('alt-store');
import { createStore } from '@satha/core';
import type { ICreateStore } from '@satha/core';
const numberStore: ICreateStore = createStore('number-save', 1);
// get value
const number = numberSave.get();
console.log(number)
// set value
numberSave.set((state: number) => state + 1);
an auto-subscribed 'useStore' react hook is available as a separate library
// npm
npm i @satha/react
// pnpm
pnpm add @satha/react
Javascript version
import React from 'react';
import { createStore } from '@satha/core';
import { useStore } from '@satha/react';
const numberStore = createStore('number-save', 1);
function App() {
const numValue = useStore(numberStore);
const onDecrement = () => {
numberStore.set((state) => state - 1);
};
const onIncrement = () => {
numberStore.set((state) => state + 1);
};
return (
<div className="App">
<h1>Test</h1>
<div>LocalStorage: {numValue}</div>
<button onClick={onDecrement}>-</button> <button onClick={onIncrement}>+</button>
</div>
);
}
export default App;
Typescript version
import React from 'react';
import { createStore } from '@satha/core';
import { useStore } from '@satha/react';
import type { ICreateStore } from '@satha/core';
const numberStore: ICreateStore = createStore('number-save', 1);
function App() {
const numValue = useStore(numberStore);
const onDecrement = () => {
numberStore.set((state: number) => state - 1);
};
const onIncrement = () => {
numberStore.set((state: number) => state + 1);
};
return (
<div className="App">
<h1>Test</h1>
<div>LocalStorage: {numValue}</div>
<button onClick={onDecrement}>-</button> <button onClick={onIncrement}>+</button>
</div>
);
}
export default App;