# use-state-advanced

> A set of useState hooks and tools

Latest version **2.0.2** (published 2025-06-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-state-advanced
pnpm add use-state-advanced
yarn add use-state-advanced
bun add use-state-advanced
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2025-06-11 |
| First published | 2023-07-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 18.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Grigory |
| Maintainers | illuminat |
| Keywords | useState, react, extension, advanced, useLocalStorage, localStorage, useDebounce, useThrottle, usePrevious, useToggle, useCounter, hooks, react |

## Links

- npm: https://www.npmjs.com/package/use-state-advanced
- Repository: https://github.com/grisha-sychev/use-state-advanced
- Homepage: https://github.com/grisha-sychev/use-state-advanced#readme
- Issues: https://github.com/grisha-sychev/use-state-advanced/issues
- npm.io page: https://npm.io/package/use-state-advanced

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.2 (latest) — 2025-06-11
- 2.0.1 — 2025-06-11
- 2.0.0 — 2025-06-11
- 1.0.5 — 2023-07-23
- 1.0.4 — 2023-07-16
- 1.0.3 — 2023-07-16
- 1.0.2 — 2023-07-16
- 1.0.1 — 2023-07-14
- 1.0.0 — 2023-07-14

## README

# use-state-advanced

Библиотека расширенных хуков состояния для React, предоставляющая удобные инструменты для работы с состоянием.

## Установка

```bash
npm install use-state-advanced
# или
yarn add use-state-advanced
```

## Доступные хуки

### useLocalStorage

Хук для синхронизации состояния с localStorage. Поддерживает:
- Разные типы storage (localStorage, sessionStorage, custom storage)
- Кастомную сериализацию/десериализацию
- TTL (time-to-live) для значений
- Синхронизацию между вкладками

```typescript
import { useLocalStorage } from 'use-state-advanced';

function Component() {
  const [value, setValue] = useLocalStorage('key', 'initialValue', {
    // Использование sessionStorage вместо localStorage
    storage: sessionStorage,
    
    // Кастомная сериализация/десериализация
    serializer: (value) => JSON.stringify(value),
    deserializer: (value) => JSON.parse(value),
    
    // TTL в миллисекундах (1 час)
    ttl: 60 * 60 * 1000
  });
  
  return (
    <div>
      <input 
        value={value} 
        onChange={e => setValue(e.target.value)} 
      />
    </div>
  );
}
```

### useStateAdvanced

Расширенная версия useState с поддержкой:
- Middleware для обработки значений
- Валидации значений
- Трансформации значений
- Обработки ошибок

```typescript
import { useStateAdvanced } from 'use-state-advanced';

function Component() {
  const [state, setState] = useStateAdvanced(initialState, {
    // Middleware для обработки значений
    middleware: [
      // Логирование
      (value) => {
        console.log('New value:', value);
        return value;
      },
      // Асинхронная обработка
      async (value) => {
        const processed = await someAsyncOperation(value);
        return processed;
      }
    ],
    
    // Валидация значений
    validators: [
      // Простая валидация
      (value) => value > 0,
      // Валидация с сообщением об ошибке
      (value) => value < 100 || 'Value must be less than 100',
      // Асинхронная валидация
      async (value) => {
        const isValid = await checkValueOnServer(value);
        return isValid;
      }
    ],
    
    // Трансформация значений
    transformers: [
      // Приведение к числу
      (value) => Number(value),
      // Округление
      (value) => Math.round(value)
    ],
    
    // Обработка ошибок
    onError: (error) => {
      console.error('State update failed:', error);
    }
  });

  // Использование
  const handleUpdate = async () => {
    await setState(newValue);
  };
}
```

### useDebounce

Хук для отложенного обновления значения. Полезен для поиска, валидации форм и API-запросов.

```typescript
import { useDebounce } from 'use-state-advanced';

function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('');
  const debouncedSearchTerm = useDebounce(searchTerm, 500);

  useEffect(() => {
    // Выполнить поиск только после того, как пользователь перестал печатать
    searchAPI(debouncedSearchTerm);
  }, [debouncedSearchTerm]);

  return <input onChange={e => setSearchTerm(e.target.value)} />;
}
```

### useThrottle

Хук для ограничения частоты обновления значения. Полезен для обработки скролла, ресайза и частых событий.

```typescript
import { useThrottle } from 'use-state-advanced';

function ScrollComponent() {
  const [scrollPosition, setScrollPosition] = useState(0);
  const throttledScroll = useThrottle(scrollPosition, 100);

  useEffect(() => {
    const handleScroll = () => {
      setScrollPosition(window.scrollY);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return <div>Scroll position: {throttledScroll}</div>;
}
```

### usePrevious

Хук для отслеживания предыдущего значения состояния.

```typescript
import { usePrevious } from 'use-state-advanced';

function CounterComponent() {
  const [count, setCount] = useState(0);
  const previousCount = usePrevious(count);

  return (
    <div>
      <p>Current: {count}</p>
      <p>Previous: {previousCount}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  );
}
```

### useToggle

Хук для удобной работы с булевыми значениями.

```typescript
import { useToggle } from 'use-state-advanced';

function ModalComponent() {
  const [isOpen, toggle] = useToggle(false);

  return (
    <div>
      <button onClick={toggle}>
        {isOpen ? 'Закрыть' : 'Открыть'}
      </button>
      {isOpen && <div>Модальное окно</div>}
    </div>
  );
}
```

### useCounter

Хук для работы с числовыми значениями, включая инкремент, декремент и установку границ.

```typescript
import { useCounter } from 'use-state-advanced';

function CounterComponent() {
  const { count, increment, decrement, reset, setCount } = useCounter(0, {
    min: 0,
    max: 10,
    step: 1
  });

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>Reset</button>
      <button onClick={() => setCount(5)}>Set to 5</button>
    </div>
  );
}
```

## Типизация

Библиотека полностью типизирована с использованием TypeScript. Все хуки поддерживают дженерики для обеспечения типобезопасности.

## Требования

- React 16.8.0 или выше
- TypeScript 4.0 или выше (опционально)

## Лицензия

MIT

## Installation
```
npm i use-state-advanced
```
At the moment there are two hooks these are useStateAdvanced and useLocalStorage
> Numeric keys are passed through a dash at the beginning of shelf-5 and shelf-2 and the like
## How to useStateAdvanced


```js
import { useStateAdvanced } from 'use-state-advanced'

const [state, setState] = useStateAdvanced({ user: { books: { shelf: {...and the like} } } });

setState('user.books.shelf-5.name.garypotter.title', data);
// user["books"]["shelf][5]["name"]["garipoter"]["title"]
```
## How to useLocalStorage

 
```js
import { useLocalStorage } from 'use-state-advanced'

const [state, setState] = useLocalStorage('myKey', { user: { books: { shelf: {...and the like} } } });

setState('user.books.shelf-5.name.garypotter.title', data);
// user["books"]["shelf][5]["name"]["garipoter"]["title"]

---
_Source: https://npm.io/package/use-state-advanced · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._