Install
$ npm install @reacthooks.org/use-local-storage
useLocalStorage
A React Hook which sets/gets a value in window.localStorage.
Synopsis
In your React component:
import { useState } from 'react'
import useLocalStorage from "use-local-storage"
function Skeleton() {
// set the value in localStorage upon initialisation
const [ salutation, setSalutation ] = useLocalStorage("salutation", "Hello")
// don't set the value but instead retrieve what is in localStorage()
const [ name, setName ] = useLocalStorage("name")
return <p>{ salutation } { name }</p>
}
Other Hooks
Please see all of the other reacthooks.org hooks:
-
use-document-title - Change the
document.title - use-resize - Subscribe to Window 'resize' events and get the width and height
- use-window-width - Subscribe to Window 'resize' events and get the width
- use-online - Get online/offline status
-
use-match-media - Get whether a media query is matched
-
.usePrefersColorScheme()- Get whether the user prefers the 'light' or 'dark' color scheme
-
-
use-set-timeout - use and automatically clear a
setTimeout() -
use-set-interval - use and automatically clear a
setInterval() - use-orientation-change - get Device Orientation updates
- use-session-storage - gets and sets a key in window.sessionStorage
- use-local-storage - gets and sets a key in window.localStorage
- use-form-validation - helps manage form values, validation, and errors
- use-watch-position - get the user's location using the Geolocation API
Author
$ npx chilts
╒════════════════════════════════════════════════════╕
│ │
│ Andrew Chilton (Personal) │
│ ------------------------- │
│ │
│ Email : andychilton@gmail.com │
│ Web : https://chilts.org │
│ Twitter : https://twitter.com/andychilton │
│ GitHub : https://github.com/chilts │
│ GitLab : https://gitlab.org/chilts │
│ │
│ Apps Attic Ltd (My Company) │
│ --------------------------- │
│ │
│ Email : chilts@appsattic.com │
│ Web : https://appsattic.com │
│ Twitter : https://twitter.com/AppsAttic │
│ GitLab : https://gitlab.com/appsattic │
│ │
│ Node.js / npm │
│ ------------- │
│ │
│ Profile : https://www.npmjs.com/~chilts │
│ Card : $ npx chilts │
│ │
╘════════════════════════════════════════════════════╛
(Ends)