@snack-uikit/utils 3.7.0 → 3.7.1-preview-e840ab81.0

package/README.md

@@ -71,6 +71,22 @@
 | value | `TValue` | - | Значение состояния |
 | defaultValue | `TValue` | - | Значение по умолчанию |
 | onChange | `(value: TValue) => void` | - | Колбек, вызываемый на смену состояния |
+## useSaveState
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| onLoadFilter* | `(filter: T) => void` | - |  |
+| filter* | `T` | - |  |
+| source | `BaseSource<T>` | - |  |
+## useSaveFilterState
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| onLoadFilter* | `(filter: TFilter) => void` | - |  |
+| filter* | `TFilter` | - |  |
+| options | `FilterStateOptions<TFilter>` | - |  |
+| parser | `(jsonFilter: string) => TFilter` | - |  |
+| encoder | `(filter: TFilter) => string` | - |  |
 ## ThemeProvider
 Провайдер, предназначенный для работы с темами
 ### Props

package/dist/cjs/hooks/index.d.ts

@@ -5,3 +5,5 @@ export * from './useIsomorphicLayoutEffect';
 export * from './useSwipeable';
 export * from './useThemeConfig';
 export * from './useValueControl';
+export * from './useSaveState';
+export * from './useSaveFilterState';

package/dist/cjs/hooks/index.js

@@ -28,4 +28,6 @@ __exportStar(require("./useEventHandler"), exports);
 __exportStar(require("./useIsomorphicLayoutEffect"), exports);
 __exportStar(require("./useSwipeable"), exports);
 __exportStar(require("./useThemeConfig"), exports);
-__exportStar(require("./useValueControl"), exports);
+__exportStar(require("./useValueControl"), exports);
+__exportStar(require("./useSaveState"), exports);
+__exportStar(require("./useSaveFilterState"), exports);

package/dist/cjs/hooks/useSaveFilterState.d.ts

@@ -0,0 +1,13 @@
+import { StateProps } from './useSaveState';
+export type FilterStateOptions<T> = {
+    filterQueryKey: string;
+    filterLocalStorageKey: string;
+    validateData: (value: unknown) => value is T;
+};
+type FilterStateProps<TFilter> = Omit<StateProps<TFilter>, 'source'> & {
+    options?: FilterStateOptions<TFilter>;
+    parser?: (jsonFilter: string) => TFilter;
+    encoder?: (filter: TFilter) => string;
+};
+export declare const useSaveFilterState: <TFilter>({ options, filter, onLoadFilter }: FilterStateProps<TFilter>) => void;
+export {};

package/dist/cjs/hooks/useSaveFilterState.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSaveFilterState = void 0;
+const react_1 = require("react");
+const useSaveState_1 = require("./useSaveState");
+const useSaveFilterState = _ref => {
+  let {
+    options,
+    filter,
+    onLoadFilter
+  } = _ref;
+  const [queryFilter, setQueryFilter] = (0, react_1.useState)(null);
+  const [localStorageFilter, setLocalStorageFilter] = (0, react_1.useState)(null);
+  const [isLoaded, setIsLoaded] = (0, react_1.useState)({
+    localStorage: false,
+    queryParams: false
+  });
+  const onLoadQueryParams = (0, react_1.useCallback)(value => {
+    setQueryFilter(value);
+    setIsLoaded(prev => Object.assign(Object.assign({}, prev), {
+      queryParams: true
+    }));
+  }, []);
+  const onLoadLocalStorage = (0, react_1.useCallback)(value => {
+    setLocalStorageFilter(value);
+    setIsLoaded(prev => Object.assign(Object.assign({}, prev), {
+      localStorage: true
+    }));
+  }, []);
+  const querySource = (0, react_1.useMemo)(() => options ? new useSaveState_1.QueryParamSource(options.filterQueryKey, options.validateData) : undefined, [options]);
+  const localStorageSource = (0, react_1.useMemo)(() => options ? new useSaveState_1.LocalStorageSource(options.filterLocalStorageKey, options.validateData) : undefined, [options]);
+  (0, useSaveState_1.useSaveState)({
+    filter,
+    onLoadFilter: onLoadQueryParams,
+    source: querySource
+  });
+  (0, useSaveState_1.useSaveState)({
+    filter,
+    onLoadFilter: onLoadLocalStorage,
+    source: localStorageSource
+  });
+  (0, react_1.useEffect)(() => {
+    if (!options) {
+      onLoadFilter(null);
+    }
+    if (isLoaded.localStorage && isLoaded.queryParams) {
+      onLoadFilter(queryFilter ? queryFilter : localStorageFilter);
+    }
+  }, [queryFilter, onLoadFilter, localStorageFilter, isLoaded, options]);
+};
+exports.useSaveFilterState = useSaveFilterState;

package/dist/cjs/hooks/useSaveState/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useSaveState';
+export * from './sources';

package/dist/cjs/hooks/useSaveState/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./useSaveState"), exports);
+__exportStar(require("./sources"), exports);

package/dist/cjs/hooks/useSaveState/sources/baseSource.d.ts

@@ -0,0 +1,11 @@
+export declare abstract class BaseSource<TFilter> {
+    filterKey: string;
+    private validate;
+    protected parse: (value: string) => TFilter;
+    protected encode: (value: TFilter) => string;
+    protected abstract getFormSource(): string;
+    protected abstract setToSource(value: string): void;
+    constructor(filterKey: string, validate: (value: unknown) => value is TFilter, parse?: (value: string) => TFilter, encode?: (value: TFilter) => string);
+    getFilter: () => NonNullable<TFilter> | null;
+    setFilter: (filter: TFilter) => void;
+}

package/dist/cjs/hooks/useSaveState/sources/baseSource.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BaseSource = void 0;
+class BaseSource {
+  constructor(filterKey, validate, parse, encode) {
+    this.filterKey = filterKey;
+    this.validate = validate;
+    this.parse = JSON.parse;
+    this.encode = JSON.stringify;
+    this.getFilter = () => {
+      const filterFromQueryParams = this.getFormSource();
+      const parsedValue = filterFromQueryParams ? this.parse(filterFromQueryParams) : null;
+      const isValid = parsedValue && this.validate(parsedValue);
+      return isValid ? parsedValue : null;
+    };
+    this.setFilter = filter => {
+      const encodedValue = this.encode(filter);
+      this.setToSource(encodedValue);
+    };
+    if (parse) {
+      this.parse = parse;
+    }
+    if (encode) {
+      this.encode = encode;
+    }
+  }
+}
+exports.BaseSource = BaseSource;

package/dist/cjs/hooks/useSaveState/sources/index.d.ts

@@ -0,0 +1,3 @@
+export * from './queryParamSource';
+export * from './localStorageSource';
+export * from './baseSource';

package/dist/cjs/hooks/useSaveState/sources/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./queryParamSource"), exports);
+__exportStar(require("./localStorageSource"), exports);
+__exportStar(require("./baseSource"), exports);

package/dist/cjs/hooks/useSaveState/sources/localStorageSource.d.ts

@@ -0,0 +1,5 @@
+import { BaseSource } from './baseSource';
+export declare class LocalStorageSource<TFilter> extends BaseSource<TFilter> {
+    getFormSource(): string;
+    setToSource(value: string): void;
+}

package/dist/cjs/hooks/useSaveState/sources/localStorageSource.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LocalStorageSource = void 0;
+const utils_1 = require("../../../utils");
+const baseSource_1 = require("./baseSource");
+class LocalStorageSource extends baseSource_1.BaseSource {
+  getFormSource() {
+    if ((0, utils_1.isBrowser)()) {
+      return localStorage.getItem(this.filterKey) || '';
+    }
+    return '';
+  }
+  setToSource(value) {
+    if ((0, utils_1.isBrowser)()) {
+      localStorage.setItem(this.filterKey, value);
+    }
+  }
+}
+exports.LocalStorageSource = LocalStorageSource;

package/dist/cjs/hooks/useSaveState/sources/queryParamSource.d.ts

@@ -0,0 +1,5 @@
+import { BaseSource } from './baseSource';
+export declare class QueryParamSource<TFilter> extends BaseSource<TFilter> {
+    getFormSource(): string;
+    setToSource(value: string): void;
+}

package/dist/cjs/hooks/useSaveState/sources/queryParamSource.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QueryParamSource = void 0;
+const utils_1 = require("../../../utils");
+const baseSource_1 = require("./baseSource");
+class QueryParamSource extends baseSource_1.BaseSource {
+  getFormSource() {
+    if ((0, utils_1.isBrowser)()) {
+      return new URL(window.location.href).searchParams.get(this.filterKey) || '';
+    }
+    return '';
+  }
+  setToSource(value) {
+    if ((0, utils_1.isBrowser)()) {
+      const url = new URL(window.location.href);
+      url.searchParams.set(this.filterKey, value);
+      history.pushState({}, '', url);
+    }
+  }
+}
+exports.QueryParamSource = QueryParamSource;

package/dist/cjs/hooks/useSaveState/useSaveState.d.ts

@@ -0,0 +1,7 @@
+import { BaseSource } from './sources/baseSource';
+export type StateProps<T> = {
+    filter: T;
+    onLoadFilter: (filter: T | null) => void;
+    source?: BaseSource<T>;
+};
+export declare const useSaveState: <T>({ filter, onLoadFilter, source }: StateProps<T>) => void;

package/dist/cjs/hooks/useSaveState/useSaveState.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSaveState = void 0;
+const react_1 = require("react");
+const useSaveState = _ref => {
+  let {
+    filter,
+    onLoadFilter,
+    source
+  } = _ref;
+  (0, react_1.useEffect)(() => {
+    if (!source) {
+      return;
+    }
+    onLoadFilter(source.getFilter());
+  }, [onLoadFilter, source]);
+  (0, react_1.useEffect)(() => {
+    if (!source) {
+      return;
+    }
+    source.setFilter(filter);
+  }, [filter, source]);
+};
+exports.useSaveState = useSaveState;

package/dist/esm/hooks/index.d.ts

@@ -5,3 +5,5 @@ export * from './useIsomorphicLayoutEffect';
 export * from './useSwipeable';
 export * from './useThemeConfig';
 export * from './useValueControl';
+export * from './useSaveState';
+export * from './useSaveFilterState';

package/dist/esm/hooks/index.js

@@ -5,3 +5,5 @@ export * from './useIsomorphicLayoutEffect';
 export * from './useSwipeable';
 export * from './useThemeConfig';
 export * from './useValueControl';
+export * from './useSaveState';
+export * from './useSaveFilterState';

package/dist/esm/hooks/useSaveFilterState.d.ts

@@ -0,0 +1,13 @@
+import { StateProps } from './useSaveState';
+export type FilterStateOptions<T> = {
+    filterQueryKey: string;
+    filterLocalStorageKey: string;
+    validateData: (value: unknown) => value is T;
+};
+type FilterStateProps<TFilter> = Omit<StateProps<TFilter>, 'source'> & {
+    options?: FilterStateOptions<TFilter>;
+    parser?: (jsonFilter: string) => TFilter;
+    encoder?: (filter: TFilter) => string;
+};
+export declare const useSaveFilterState: <TFilter>({ options, filter, onLoadFilter }: FilterStateProps<TFilter>) => void;
+export {};

package/dist/esm/hooks/useSaveFilterState.js

@@ -0,0 +1,30 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { LocalStorageSource, QueryParamSource, useSaveState } from './useSaveState';
+export const useSaveFilterState = ({ options, filter, onLoadFilter }) => {
+    const [queryFilter, setQueryFilter] = useState(null);
+    const [localStorageFilter, setLocalStorageFilter] = useState(null);
+    const [isLoaded, setIsLoaded] = useState({
+        localStorage: false,
+        queryParams: false,
+    });
+    const onLoadQueryParams = useCallback((value) => {
+        setQueryFilter(value);
+        setIsLoaded(prev => (Object.assign(Object.assign({}, prev), { queryParams: true })));
+    }, []);
+    const onLoadLocalStorage = useCallback((value) => {
+        setLocalStorageFilter(value);
+        setIsLoaded(prev => (Object.assign(Object.assign({}, prev), { localStorage: true })));
+    }, []);
+    const querySource = useMemo(() => (options ? new QueryParamSource(options.filterQueryKey, options.validateData) : undefined), [options]);
+    const localStorageSource = useMemo(() => (options ? new LocalStorageSource(options.filterLocalStorageKey, options.validateData) : undefined), [options]);
+    useSaveState({ filter, onLoadFilter: onLoadQueryParams, source: querySource });
+    useSaveState({ filter, onLoadFilter: onLoadLocalStorage, source: localStorageSource });
+    useEffect(() => {
+        if (!options) {
+            onLoadFilter(null);
+        }
+        if (isLoaded.localStorage && isLoaded.queryParams) {
+            onLoadFilter(queryFilter ? queryFilter : localStorageFilter);
+        }
+    }, [queryFilter, onLoadFilter, localStorageFilter, isLoaded, options]);
+};

package/dist/esm/hooks/useSaveState/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useSaveState';
+export * from './sources';

package/dist/esm/hooks/useSaveState/index.js

@@ -0,0 +1,2 @@
+export * from './useSaveState';
+export * from './sources';

package/dist/esm/hooks/useSaveState/sources/baseSource.d.ts

@@ -0,0 +1,11 @@
+export declare abstract class BaseSource<TFilter> {
+    filterKey: string;
+    private validate;
+    protected parse: (value: string) => TFilter;
+    protected encode: (value: TFilter) => string;
+    protected abstract getFormSource(): string;
+    protected abstract setToSource(value: string): void;
+    constructor(filterKey: string, validate: (value: unknown) => value is TFilter, parse?: (value: string) => TFilter, encode?: (value: TFilter) => string);
+    getFilter: () => NonNullable<TFilter> | null;
+    setFilter: (filter: TFilter) => void;
+}

package/dist/esm/hooks/useSaveState/sources/baseSource.js

@@ -0,0 +1,24 @@
+export class BaseSource {
+    constructor(filterKey, validate, parse, encode) {
+        this.filterKey = filterKey;
+        this.validate = validate;
+        this.parse = JSON.parse;
+        this.encode = JSON.stringify;
+        this.getFilter = () => {
+            const filterFromQueryParams = this.getFormSource();
+            const parsedValue = filterFromQueryParams ? this.parse(filterFromQueryParams) : null;
+            const isValid = parsedValue && this.validate(parsedValue);
+            return isValid ? parsedValue : null;
+        };
+        this.setFilter = (filter) => {
+            const encodedValue = this.encode(filter);
+            this.setToSource(encodedValue);
+        };
+        if (parse) {
+            this.parse = parse;
+        }
+        if (encode) {
+            this.encode = encode;
+        }
+    }
+}

package/dist/esm/hooks/useSaveState/sources/index.d.ts

@@ -0,0 +1,3 @@
+export * from './queryParamSource';
+export * from './localStorageSource';
+export * from './baseSource';

package/dist/esm/hooks/useSaveState/sources/index.js

@@ -0,0 +1,3 @@
+export * from './queryParamSource';
+export * from './localStorageSource';
+export * from './baseSource';

package/dist/esm/hooks/useSaveState/sources/localStorageSource.d.ts

@@ -0,0 +1,5 @@
+import { BaseSource } from './baseSource';
+export declare class LocalStorageSource<TFilter> extends BaseSource<TFilter> {
+    getFormSource(): string;
+    setToSource(value: string): void;
+}

package/dist/esm/hooks/useSaveState/sources/localStorageSource.js

@@ -0,0 +1,15 @@
+import { isBrowser } from '../../../utils';
+import { BaseSource } from './baseSource';
+export class LocalStorageSource extends BaseSource {
+    getFormSource() {
+        if (isBrowser()) {
+            return localStorage.getItem(this.filterKey) || '';
+        }
+        return '';
+    }
+    setToSource(value) {
+        if (isBrowser()) {
+            localStorage.setItem(this.filterKey, value);
+        }
+    }
+}

package/dist/esm/hooks/useSaveState/sources/queryParamSource.d.ts

@@ -0,0 +1,5 @@
+import { BaseSource } from './baseSource';
+export declare class QueryParamSource<TFilter> extends BaseSource<TFilter> {
+    getFormSource(): string;
+    setToSource(value: string): void;
+}

package/dist/esm/hooks/useSaveState/sources/queryParamSource.js

@@ -0,0 +1,17 @@
+import { isBrowser } from '../../../utils';
+import { BaseSource } from './baseSource';
+export class QueryParamSource extends BaseSource {
+    getFormSource() {
+        if (isBrowser()) {
+            return new URL(window.location.href).searchParams.get(this.filterKey) || '';
+        }
+        return '';
+    }
+    setToSource(value) {
+        if (isBrowser()) {
+            const url = new URL(window.location.href);
+            url.searchParams.set(this.filterKey, value);
+            history.pushState({}, '', url);
+        }
+    }
+}

package/dist/esm/hooks/useSaveState/useSaveState.d.ts

@@ -0,0 +1,7 @@
+import { BaseSource } from './sources/baseSource';
+export type StateProps<T> = {
+    filter: T;
+    onLoadFilter: (filter: T | null) => void;
+    source?: BaseSource<T>;
+};
+export declare const useSaveState: <T>({ filter, onLoadFilter, source }: StateProps<T>) => void;

package/dist/esm/hooks/useSaveState/useSaveState.js

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+export const useSaveState = ({ filter, onLoadFilter, source }) => {
+    useEffect(() => {
+        if (!source) {
+            return;
+        }
+        onLoadFilter(source.getFilter());
+    }, [onLoadFilter, source]);
+    useEffect(() => {
+        if (!source) {
+            return;
+        }
+        source.setFilter(filter);
+    }, [filter, source]);
+};

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Utils",
-  "version": "3.7.0",
+  "version": "3.7.1-preview-e840ab81.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -39,5 +39,5 @@
     "react-swipeable": "7.0.2",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "3528e78aec23804dca44d311947c1dcd4ed3792b"
+  "gitHead": "1dc61e115ed2debadc06541b10d10df416d1d5e5"
 }

package/src/hooks/index.ts

@@ -5,3 +5,5 @@ export * from './useIsomorphicLayoutEffect';
 export * from './useSwipeable';
 export * from './useThemeConfig';
 export * from './useValueControl';
+export * from './useSaveState';
+export * from './useSaveFilterState';

package/src/hooks/useSaveFilterState.ts

@@ -0,0 +1,55 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { LocalStorageSource, QueryParamSource, StateProps, useSaveState } from './useSaveState';
+
+export type FilterStateOptions<T> = {
+  filterQueryKey: string;
+  filterLocalStorageKey: string;
+  validateData: (value: unknown) => value is T;
+};
+
+type FilterStateProps<TFilter> = Omit<StateProps<TFilter>, 'source'> & {
+  options?: FilterStateOptions<TFilter>;
+  parser?: (jsonFilter: string) => TFilter;
+  encoder?: (filter: TFilter) => string;
+};
+
+export const useSaveFilterState = <TFilter>({ options, filter, onLoadFilter }: FilterStateProps<TFilter>) => {
+  const [queryFilter, setQueryFilter] = useState<TFilter | null>(null);
+  const [localStorageFilter, setLocalStorageFilter] = useState<TFilter | null>(null);
+  const [isLoaded, setIsLoaded] = useState<{ localStorage: boolean; queryParams: boolean }>({
+    localStorage: false,
+    queryParams: false,
+  });
+
+  const onLoadQueryParams = useCallback((value: TFilter | null) => {
+    setQueryFilter(value);
+    setIsLoaded(prev => ({ ...prev, queryParams: true }));
+  }, []);
+
+  const onLoadLocalStorage = useCallback((value: TFilter | null) => {
+    setLocalStorageFilter(value);
+    setIsLoaded(prev => ({ ...prev, localStorage: true }));
+  }, []);
+
+  const querySource = useMemo(
+    () => (options ? new QueryParamSource<TFilter>(options.filterQueryKey, options.validateData) : undefined),
+    [options],
+  );
+  const localStorageSource = useMemo(
+    () => (options ? new LocalStorageSource<TFilter>(options.filterLocalStorageKey, options.validateData) : undefined),
+    [options],
+  );
+
+  useSaveState<TFilter>({ filter, onLoadFilter: onLoadQueryParams, source: querySource });
+  useSaveState<TFilter>({ filter, onLoadFilter: onLoadLocalStorage, source: localStorageSource });
+
+  useEffect(() => {
+    if (!options) {
+      onLoadFilter(null);
+    }
+    if (isLoaded.localStorage && isLoaded.queryParams) {
+      onLoadFilter(queryFilter ? queryFilter : localStorageFilter);
+    }
+  }, [queryFilter, onLoadFilter, localStorageFilter, isLoaded, options]);
+};

package/src/hooks/useSaveState/index.ts

@@ -0,0 +1,2 @@
+export * from './useSaveState';
+export * from './sources';

package/src/hooks/useSaveState/sources/baseSource.ts

@@ -0,0 +1,32 @@
+export abstract class BaseSource<TFilter> {
+  protected parse: (value: string) => TFilter = JSON.parse;
+  protected encode: (value: TFilter) => string = JSON.stringify;
+  protected abstract getFormSource(): string;
+  protected abstract setToSource(value: string): void;
+
+  constructor(
+    public filterKey: string,
+    private validate: (value: unknown) => value is TFilter,
+    parse?: (value: string) => TFilter,
+    encode?: (value: TFilter) => string,
+  ) {
+    if (parse) {
+      this.parse = parse;
+    }
+    if (encode) {
+      this.encode = encode;
+    }
+  }
+
+  getFilter = () => {
+    const filterFromQueryParams = this.getFormSource();
+    const parsedValue = filterFromQueryParams ? (this.parse(filterFromQueryParams) as TFilter) : null;
+    const isValid = parsedValue && this.validate(parsedValue);
+    return isValid ? parsedValue : null;
+  };
+
+  setFilter = (filter: TFilter) => {
+    const encodedValue = this.encode(filter);
+    this.setToSource(encodedValue);
+  };
+}

package/src/hooks/useSaveState/sources/index.ts

@@ -0,0 +1,3 @@
+export * from './queryParamSource';
+export * from './localStorageSource';
+export * from './baseSource';

package/src/hooks/useSaveState/sources/localStorageSource.ts

@@ -0,0 +1,17 @@
+import { isBrowser } from '../../../utils';
+import { BaseSource } from './baseSource';
+
+export class LocalStorageSource<TFilter> extends BaseSource<TFilter> {
+  getFormSource(): string {
+    if (isBrowser()) {
+      return localStorage.getItem(this.filterKey) || '';
+    }
+    return '';
+  }
+
+  setToSource(value: string): void {
+    if (isBrowser()) {
+      localStorage.setItem(this.filterKey, value);
+    }
+  }
+}

package/src/hooks/useSaveState/sources/queryParamSource.ts

@@ -0,0 +1,19 @@
+import { isBrowser } from '../../../utils';
+import { BaseSource } from './baseSource';
+
+export class QueryParamSource<TFilter> extends BaseSource<TFilter> {
+  getFormSource(): string {
+    if (isBrowser()) {
+      return new URL(window.location.href).searchParams.get(this.filterKey) || '';
+    }
+    return '';
+  }
+
+  setToSource(value: string): void {
+    if (isBrowser()) {
+      const url = new URL(window.location.href);
+      url.searchParams.set(this.filterKey, value);
+      history.pushState({}, '', url);
+    }
+  }
+}

package/src/hooks/useSaveState/useSaveState.ts

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+
+import { BaseSource } from './sources/baseSource';
+
+export type StateProps<T> = {
+  filter: T;
+  onLoadFilter: (filter: T | null) => void;
+  source?: BaseSource<T>;
+};
+
+export const useSaveState = <T>({ filter, onLoadFilter, source }: StateProps<T>) => {
+  useEffect(() => {
+    if (!source) {
+      return;
+    }
+    onLoadFilter(source.getFilter());
+  }, [onLoadFilter, source]);
+
+  useEffect(() => {
+    if (!source) {
+      return;
+    }
+    source.setFilter(filter);
+  }, [filter, source]);
+};