Usage
Library
See Documentation for examples and API
interface
// js
const [value, setValue, unsetValue] = useSomeStore(keyInStorage, defaultValue);
// ts
const [value, setValue, unsetValue]: [Type, (value: Type) => any, () => any] = useSomeStore<Type>(keyInStorage: string, defaultValue: Type);
value works equal with useStoresetValue(newValue) works equal with useStore, set newValue in selected store in keyInStorageunsetValue() delete keyInStorage from storekeyInStorage key used in storagedefaultValue used as default value data when store keyInStorage is empty
usage
To use any hook, be sure to use the appropriate provider higher in the react tree.
import { QueryStoreProvider, useQueryStore } from '@deep-foundation/store/query';
import { CookiesStoreProvider, useCookiesStore } from '@deep-foundation/store/cookies';
import { LocalStoreProvider, useLocalStore } from '@deep-foundation/store/local';
import { CapacitorStoreProvider, useCapacitorStore } from '@deep-foundation/store/capacitor';
<QueryStoreProvider useRouter={useRouter}>
<CookiesStoreProvider>
<LocalStoreProvider>
<CapacitorStoreProvider
fetchInterval={5000} {/* optional, disabled by default, need to support catching not @deep-foundation/store based capacitor store changes. */}
>
<Content/>
</CapacitorStoreProvider>
</LocalStoreProvider>
</CookiesStoreProvider>
</QueryStoreProvider>
const [query, setQuery] = useQueryStore('demo', 5);
// ?demo=5
const [cookie, setCookie] = useCookiesStore('demo', 5);
// cookies demo=5
const [local, setLocal] = useLocalStore('demo', 5);
// localStorage.getItem('demo') // 5
const [capacitor, setCapacitor] = useCapacitorStore('demo', 5);
// await Preferences.get('demo') // { value: 5 }
compatibility
cases
prepare stores
// stores.tsx
export function useToken() {
return useCookiesStore('my-token-key', null);
}
// component.tsx
const [token, setToken] = useToken();
provide contextual stores
// stores.tsx
import { IUseStore } from '@deep-foundation/store/store';
export const OptionsContext = React.createContext<IUseStore | void>();
export function OptionsProvider({ key, children }: { key: string; children: any }) {
const useStore = React.useMemo(() => {
return function useOptions(defualtValue) {
return useQueryStore(key, defualtValue);
};
}, []);
return <OptionsContext.Provider value={useStore}>{children}</OptionsContext.Provider>
}
export function useOptions(defualtValue) {
return React.useContext(OptionsContext)(defualtValue);
}
// component1.tsx
<OptionsProvider key={'abc'}><Component2/></OptionsProvider>
// component2.tsx
const [options, setOptions] = useOptions({ x: 'y' });
