The react-js-use-local-storage from gedjerone

react-js-use-local-storage's Introduction

Кастомный хук useLocalStorage для React JS

Используется для сихнхронизации state и localStorage

Tip

Почитать о том, как правильно реализовывать подобный хук и как он работает можно по ссылкам: vue-use, react-hooks, youtube

Warning

Для данного проекта создана упрощённая версия (правильно сериализует только с объекты, не работает для SSR и т.д.)

Параметры

Название	Тип	Описание
`key`	`string`	Название ключа, под которым будет сохранено значение в localStorage
`initialValue`	`object` или `(() => object)`	Начальное значение (как и в useState можно использовать функцию для задания начального значения)

Возращаемое значение (по аналогии с useState)

Название	Тип	Описание
`value`	`T`	Значение
`setValue`	`React.Dispatch<T>`	Метод для изменения значения

Удалить ключа из localStorage можно следующим образом

setValue(() => '')

Пример использования

import { useLocalStorage } from '@/hooks'
export const Component = () => {
const [state, setState] = useLocalStorage('test', {
  name: 'Maksim',
  status: 'busy',
  age: 23
})

const increaseUserAge = (user) => {
  return {
    ...user,
    age: user?.age + 1
  }
}

  return (
    <main>
      <p>Юзер: {state?.name ?? ''}</p>
      <p>Возраст: {state?.status ?? ''}</p>
      <p>Статус: {state?.age ?? 0}</p>
      <button
        onClick={
          () => setState((prev) => increaseUserAge(prev))
        }
      >Увеличить возраст</button>
    </main>
  )
}

Recommend Projects