https://github.com/technote-space/use-local-storage

https://github.com/technote-space/use-local-storage

Last synced: 9 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/technote-space/use-local-storage
• Owner: technote-space
• License: mit
• Created: 2021-03-03T14:51:06.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2023-12-24T16:53:34.000Z (almost 2 years ago)
• Last Synced: 2025-03-08T20:04:39.014Z (9 months ago)
• Language: TypeScript
• Size: 1.89 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

          
# useLocalStorage

[![npm version](https://badge.fury.io/js/%40technote-space%2Fuse-local-storage.svg)](https://badge.fury.io/js/%40technote-space%2Fuse-local-storage)

[![CI Status](https://github.com/technote-space/use-local-storage/workflows/CI/badge.svg)](https://github.com/technote-space/use-local-storage/actions)

[![codecov](https://codecov.io/gh/technote-space/use-local-storage/branch/master/graph/badge.svg)](https://codecov.io/gh/technote-space/use-local-storage)

[![CodeFactor](https://www.codefactor.io/repository/github/technote-space/use-local-storage/badge)](https://www.codefactor.io/repository/github/technote-space/use-local-storage)

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/technote-space/use-local-storage/blob/master/LICENSE)

React hook to handle localStorage.

## Table of Contents

Details

- [Usage](#usage)

  - [Install](#install)

  - [Use](#use)

- [Author](#author)

## Usage

### Install

`yarn add @technote-space/use-local-storage`

or

`npm i @technote-space/use-local-storage`

### Use

e.g.

```ts

import {useCallback} from 'react';

import useLocalStorage from '@technote-space/use-local-storage';

import useMediaQuery from '@material-ui/core/useMediaQuery';

export type ThemeColor = 'light' | 'dark';

const useDarkMode = (): [ThemeColor, () => void, (isDarkMode: boolean) => void] => {

  const [isDarkMode, setDarkMode] = useLocalStorage('is-dark-mode', useMediaQuery('(prefers-color-scheme: dark)'));

  const toggleDarkMode            = useCallback(() => {

    setDarkMode(isDarkMode => !isDarkMode);

  }, []);

  return [isDarkMode ? 'dark' : 'light', toggleDarkMode, setDarkMode];

};

export default useDarkMode;

```

## Author

[GitHub (Technote)](https://github.com/technote-space)  

[Blog](https://technote.space)